Canvas toDataURL（）仅在Firefox中返回空白图像

Question

我正在使用glfx.js编辑我的图像，但是当我尝试使用toDataURL()函数获取该图像的数据时，我得到了一个空白图像（宽度与原始图像相同）。

奇怪的是，在Chrome中，脚本可以完美运行。

我要提及的是，canvas使用onload事件加载了图像：

           img.onload = function(){

                try {

                    canvas = fx.canvas();

                } catch (e) {

                    alert(e);

                    return;

                }

                // convert the image to a texture

                texture = canvas.texture(img);

                // draw and update canvas

                canvas.draw(texture).update();

                // replace the image with the canvas

                img.parentNode.insertBefore(canvas, img);

                img.parentNode.removeChild(img);

            }

另外，我的图片路径在同一域中；

问题（在Firefox中）是当我点击“保存”按钮时。Chrome返回预期结果，但Firefox返回以下结果：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7YAAAIWCAYAAABjkRHCAAAHxklEQVR4nO3BMQEAAADCoPVPbQZ/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

... [ lots of A s ] ... 

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAzwD6aAABkwvPRgAAAABJRU5ErkJggg==

是什么导致此结果，如何解决？

Answer 1

之所以为FF，是因为此处的规范含糊不清。WebGL规范有效地表示，如果向WebGL上下文发出了绘画命令，则下次将网页与页面合成时，将清除画布的绘画缓冲区。当合成发生时是异步的。换句话说，您不知道何时绘制以及在绘制某物与复合时间发生以及清除缓冲区之间将发生什么事件。这意味着在每个浏览器上它都是不同的。在Chrome的情况下，您需要先清除画布，然后再清除FF