Forum

canvas.toDataURL() resulting in an empty transparent image

13 May 2017 10:57
I am using blend4web to create a 3D product configurator with a varied set of options that would be live rendered. Blend4web renders this on a canvas. I have built the db in such a way that the product is only created as and when the user creates it putting all the building blocks together on the canvas and paints them with different materials. Once the user configures the product, I want to be capture the rendered product on the canvas as a png and display it in the cart page.

When I right click on the loaded 3D file on canvas and choose "Save Image as..", I get the actual canvas content as a png image. However, when I do the same thing with js in the file or even in console, an empty transparent image is being generated. This issue has been giving me bad headaches for the last couple of days and I haven't found any reason or solution.

I have referred this and edited b4w.min.js so that any getContext("2d") is modified to getContext("2d",{preserveDrawingBuffer: true}). However, the result is still the same.

Console output below. b is an empty image-

    > var a = document.getElementsByTagName("canvas")[0];
a
<canvas width=​"575" height=​"613" style=​"position:​ absolute;​ left:​ 0px;​ top:​ 0px;​ width:​ 575px;​ height:​ 613px;​">​
> b = a.toDataURL();
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAj8AAAJlCAYAAAA1uZOmAAAcrUlEQ…GjAwQIECBAgEBKwPhJvVtYAgQIECBAwPjRAQIECBAgQCAl8IPuAmYVHTVbAAAAAElFTkSuQmCC"
15 May 2017 15:36
Answered here.
26 April 2018 22:39
Hi, I'm having the same problem, added the line "preserveDrawingBuffer: true" to the exports.context object in src/config.js file, but I'm still getting an empty Image. What else could I've done wrong? Thanks in advance
 
Please register or log in to leave a reply.