javascript – Canvas toDataURL()仅在Firefox中返回空白图像

我使用 glfx.js编辑我的图像,但是当我试图使用toDataURL()函数获取该图像的数据时,我得到一个空白图像(宽度与原始图像大小相同).

奇怪的是,在Chrome中,剧本工作完美.

我想提到的是使用onload事件在canvas中加载图像：

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==

什么可能导致这个结果,我该如何解决？

解决方法

很可能在绘制到画布的时间与您调用到数据库的时间之间有一些异步事件.默认情况下,每个复合后画布都被清除.通过使用preserveDrawingBuffer创建WebGL上下文来阻止画布清除：true

var gl = canvas.getContext("webgl",{preserveDrawingBuffer: true});

或者确保在退出您正在使用的事件之前调用数据库.例如,如果你这样做

function render() {
  drawScene(); 
  requestAnimationFrame(render);
}
render();

还有别的地方这样做

someElement.addEventListener('click',function() {
  var data = someCanvas.toDataURL();
},false);

这两个事件,动画框架和点击不同步,并且可以在调用它们之间清除画布.注意：画布不会像双缓冲一样清除,而缓冲区toDataURL和其他影响该缓冲区的命令被清除.

解决方案是使用preserveDrawingBuffer或在与呈现相同的事件中调用toDataURL.例如

var captureFrame = false;

function render() {
  drawScene(); 

  if (captureFrame) {
    captureFrame = false;
    var data = someCanvas.toDataURL();
    ...
  }

  requestAnimationFrame(render);
}
render();

someElement.addEventListener('click',function() {
  captureFrame = true;
},false);

preserveDrawingBuffer有什么意义：false是默认值？它可以显着更快,特别是在移动上,不必保留绘图缓冲区.浏览器的另一种方法是浏览器需要2张画布.你正在绘制的和它正在显示的那个.它有两种方式来处理这两个缓冲区. (A)双缓冲液.让你绘制一个,显示另一个,当完成渲染时交换缓冲区,这是从退出执行绘制命令的任何事件推断的(B)复制要绘制的缓冲区的内容来执行正在显示的缓冲区.交换比复制快得多.所以,交换是默认的.浏览器究竟是怎么发生的.唯一的要求是如果preserveDrawingBuffer为false,那么绘图缓冲区在复合后被清除(这是另一个异步事件,因此不可预测),如果preserveDrawingBuffer为true,那么它必须复制,以便保留drawbuffer的内容.

javascript – Canvas toDataURL()仅在Firefox中返回空白图像

解决方法

相关推荐