Is it possible to draw the render in a canvas element?

canvas

#1

I found a method to download canvas blob (url) in my smartphone, my question is, Is it possible to draw the render scene in a canvas?, in that way get the blob and download it this way
**the problem in my case is that some codes to download images works perfect in the PC but doesn’t work in my phone (android system).
Thanks in advance .


#2

Three.js renders to canvas by default.


#3

You can access the internal canvas of the renderer via renderer.domElement.


#4

thanks guys for your help,
I tried like a canvas and transfer to an image element but I just get a blank image…

// ca is an img element

       alert(renderer.domElement.toDataURL());//

       ca.src=renderer.domElement.toDataURL();//it shows a back image only

Im I doing something wrong?


#5

Make sure that you’ve rendered the scene before calling toDataURL(). Here is an example I wrote a while ago using toBlob() instead of toDataURL(), but either one should work…

renderer.render( scene, camera );

const imgData = canvas.toBlob( ( blob ) => {

    const imgEl = document.createElement( 'img' );
    imgEl.src = URL.createObjectURL( blob );
    document.body.appendChild( imgEl );

});

#6

Just great…
what it needed was render it again before getting blob…
thanks…

canvas = renderer.domElement;
const imgData = canvas.toBlob((blob) = > {

    const imgEl = document.createElement('img');
    imgEl.src = URL.createObjectURL(blob);
    document.body.appendChild(imgEl);


#7

Hi, so I am searching all over the internet but I am not able to find why this (toDataUrl or toBlob) does NOT work in Chrome.

I have the piece of code as @donmccurdy said but it does not work in chrome, all the other browsers are fine.

Does anybody know what causes this and/or how I can get it to work ?

Refards


#8

When creating the WebGLRenderer, you need to set the option preserveDrawingBuffer to true.


#9

Excuse me, I’ve done that.

And I just found out that it does not work on chrome on a mac…


#10

Both are supported by Chrome, the problem is something about your specific case. Please provide complete code necessary to reproduce the problem or a demo on JSFiddle, Codepen, Glitch, or similar.


#11

I have the perfect CodePen

It works on Chrome (windows), Firefox (windows / mac), safari but NOT on chrome (mac)

This code is exactly what I use. It might be my system (El Capitan latest version)


#12

I can save the screenshot with Chrome 66.0.3359.170 and macOS 10.13.4.


#13

Weird… I cannot save (just in chrome)

This is my system I am working on


#14

Okay, so I’ve updated to High Siera and it works fine.

So the problem lies on the system possibly… ?