Three.js canvas.toDataURL() 在 Chromium 中是否损坏？答案

【问题标题】：Is Three.js canvas.toDataURL() broken in Chromium?Three.js canvas.toDataURL() 在 Chromium 中是否损坏？
【发布时间】：2018-08-21 03:39:52
【问题描述】：

我前段时间进行了系统升级，之后我开始注意到 Chromium 的一些问题。在我的 Three.js r85 项目开始加载之前，其中一个问题涉及 Chromium 挂起几秒钟。我已经升级到 Three.js r90，这个问题就消失了。

但是，即使使用最新版本的 Three.js，toDataUrl() 似乎也不再适用。这是a CodePen by Shiva Saxena，它与我自己的代码类似，在 Firefox 中运行良好，但在 Chromium 中却不行：

renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });

我也尝试过 an approach 而不将 preserveDrawingBuffer 设置为 true 并在调用渲染场景后立即调用 toDataUrl() 。它也不再起作用了。

renderer.render( scene, camera );
var screenshot = renderer.domElement.toDataURL();

还有其他人遇到这种行为吗？有没有使用 toDataUrl() 将纹理渲染到图像上的替代方法？

Chromium 版本 65.0.3325.146（开发者构建）（64 位）

【问题讨论】：

FWIW，在 osx 上的 Chrome 中工作（unto canary）。作为一个盲目的镜头并且没有 Chromium 进行测试，你确定你没有安全/指纹保护插件/设置吗？你有二维上下文的结果吗？
在 osx 上尝试过 chromium，它也可以在那里工作。
@Kaiido 它在 Windows 上的 Chrome 中也适用于我。我尝试禁用所有扩展。 2D 上下文有效。
所以最好的办法就是举报。现在，如果您需要快速修复，您可以尝试通过 2D 上下文作为代理 (twoDCtx.drawImage(webgl_canvas, 0,0); twoDCanvas.toDataURL();)，但这是假设 drawImage 有效...如果没有，您可以尝试 ImageData 中的 readPixels缓冲区，然后将ImageData放在2DContext上。
大声笑，看来我的基本 three.js 旋转框正在传播。 Scrrenshot 仍然为我工作，Windows 10 上的 Chrome（版本 65.0.3325.146（官方构建）（64 位））

标签： javascript three.js html5-canvas chromium archlinux

【解决方案1】：

Chrome 很好，但您应该使用代理画布来保存图像，如 cmets 中所述。

let canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
let canvasCtxt = canvas.getContext('2d');
canvasCtxt.drawImage(editor.renderer.domElement, 0, 0, canvas.width, canvas.height);

canvas.toBlob(function(blob){
    blob.name = 'test.png';
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'test.png';
    link.click();
});

【讨论】：