Forum

canvas.toDataURL() giving empty image

12 May 2017 19:29
Hi,

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 image is being generated. The purpose of this functionality is simple. I am building a product configurator and would like to generate the product image as and when the product is designed to add in the shopping cart. This issue has been giving me bad headaches for the last couple of days and I haven't found any reason or solution.

I referred this and edited all the getContext instances in b4w.min.js from getContext("2d") to getContext("2d", {preserveDrawingBuffer: true}). But still no change.

Console output below:


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:35
Hi!

You have set preservedDrawingBuffer for 2D canvases. WebGL is drawn on 3D canvas.
What you have to do is just put the
preserveDrawingBuffer: true
line to the exports.context obect in src/config.js file.
Blend4Web developer
 
Please register or log in to leave a reply.