Question

我需要使用canvas上下文的drawImage方法将使用three.js渲染的画布复制到另一个画布。

ctx.drawImage(renderer.domElement, 0, 0);

它在Chrome和Firefox上的效果与预期相同，但在我的桌面Safari上根本不起作用。我试图指定纹理格式，但它没有任何区别。有人知道这个伎俩吗？

这是一个带有three.js脚本的codepen。

http://codepen.io/anon/pen/BNvzMJ

Answer 1

此代码适用于Safari，但它会颠倒翻转图像，帧速率下降50％，因此它绝对不理想。

http://codepen.io/anon/pen/VLqmRO

    var gl = renderer.getContext();

    var width = renderer.domElement.width;
    var height = renderer.domElement.height;

    var size = width * height * 4;
    var pixels = new Uint8Array(size);
    var image = ctx.createImageData(width, height);

    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

    for (var i = 0; i < size; i++) {
        image.data[i] = pixels[i];
    }

    ctx.putImageData(image, 0, 0);

Answer 2

为什么不使用canvas.getImageData？

var width = renderer.domElement.width;
var height = renderer.domElement.height;
var imgData = gl.getImageData(0, 0, width , height);
ctx.drawImage(imgData, 10, 70);

在桌面Safari上将三个JS渲染画布复制到另一个画布失败

2 个答案: