我正在使用 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==

是什么导致了这个结果，我该如何解决？

最佳答案

很可能在您绘制到 Canvas 的时间和您调用 toDataURL 的时间之间存在一些异步事件。默认情况下，每次合成后都会清除 Canvas 。通过使用 preserveDrawingBuffer: true 创建 WebGL 上下文来防止 Canvas 被清除，如

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

或者确保在退出您用于呈现的任何事件之前调用 toDataURL。例如，如果你这样做

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

在其他地方做这个

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

动画帧 和点击 这 2 个事件不同步，在调用它们之间可能会清除 Canvas 。注意: Canvas 不会显示为已清除，因为它是双缓冲的，但缓冲区 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 个 Canvas 副本。您正在绘制的那个和它正在显示的那个。它有两种方法来处理这两个缓冲区。 (A) 双缓冲区。让你绘制一个，显示另一个，当你完成渲染时交换缓冲区，这是从退出任何发出绘制命令的事件中推断出来的(B)复制你正在绘制的缓冲区的内容以执行正在显示的缓冲区.交换比复制快得多。所以，交换是默认的。实际发生什么取决于浏览器。唯一的要求是，如果 preserveDrawingBuffer 为 false，则绘图缓冲区在复合后被清除(这是另一个异步事件，因此不可预测)如果 preserveDrawingBuffer 为 true 则它必须复制以便保留绘图缓冲区的内容。

请注意，一旦 Canvas 具有上下文，它将始终具有相同的上下文。所以换句话说，假设您更改了初始化 WebGL 上下文的代码，但您仍想设置 preserveDrawingBuffer: true

至少有两种方式。

首先找到 Canvas ，获取上下文

因为后面的代码将以相同的上下文结束。

<script>
document.querySelector('#somecanvasid').getContext(
    'webgl', {preserveDrawingBuffer: true});
</script>
<script src="script/that/will/use/somecanvasid.js"></script>

因为您已经为该 Canvas 创建了一个上下文，所以之后的任何脚本都将获得相同的上下文。

扩充getContext

<script>
HTMLCanvasElement.prototype.getContext = function(origFn) {
  return function(type, attributes) {
    if (type === 'webgl') {
      attributes = Object.assign({}, attributes, {
        preserveDrawingBuffer: true,
      });
    }
    return origFn.call(this, type, attributes);
  };
}(HTMLCanvasElement.prototype.getContext);
</script>
<script src="script/that/will/use/webgl.js"></script>

在这种情况下，在扩充 getContext 之后创建的任何 webgl 上下文都会将 preserveDrawingBuffer 设置为 true。

关于javascript - Canvas toDataURL() 返回空白图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26783586/