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

Questions
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 );

});
1 Like
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.

2 Likes
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 on02%20PM

14

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

So the problem lies on the system possibly… ?