Question

前段时间我进行了系统升级，之后我开始注意到Chromium的一些问题。其中一个问题涉及Chromium在我的Three.js r85项目开始加载之前挂了几秒钟。我升级到了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 Version 65.0.3325.146（Developer Build）（64位）

Answer 1

Chrome很好，但您应该使用代理画布来保存评论中提到的图像。

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();
});

在Chromium中是否破坏了Three.js canvas.toDataURL（）？

1 个答案: