CanvasElement.toDataURL() for WebGL canvases

Question

我们开发了复杂的WebGL应用程序，并为用户提供了保存当前场景屏幕截图的能力。虽然这个功能在Chrome和Firefox中可以正常工作，但我们在safari中面临着几个问题。

请查看以下代码。如您所见，我们使用CanvasElement的toDataURL（）方法进行屏幕截图。虽然这段代码在其他浏览器中可以正常工作，但它在safari中会产生错误的图像（至少对于WebGL画布）。

您可以通过打开此文件或在safari和其他浏览器中运行所附的代码片段，轻松地自己重现问题。

我们做错什么了吗？是否有解决此问题的方法？

谢谢。

UPD:特别是对于那些说它与preserveDrawingBuffer有关的人，我更改了附加的代码片段，以表明即使preserveDDrawingBuffer设置为true，它在safari中仍然表现错误。

<script type="text/javascript" src="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/webgl/resources/webgl-utils.js"></script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
  attribute vec2 a_position;
  void main() {
    gl_Position = vec4(a_position, 0, 1);
  }
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(0,1,0,1);  // green
  }
</script>
<div>
  <canvas id="canvas1" width="300" height="300"></canvas>
  <img id="img1"/>
</div>
<div>
  <canvas id="canvas2" width="300" height="300"></canvas>
  <img id="img2"/>
</div>
<div>
  <canvas id="canvas3" width="300" height="300"></canvas>
  <img id="img3"/>
</div>
<div>
  <canvas id="canvas4" width="300" height="300"></canvas>
  <img id="img4"/>
</div>
<div>
  <canvas id="canvas5" width="300" height="300"></canvas>
  <img id="img5"/>
</div>
<div>
  <canvas id="canvas6" width="300" height="300"></canvas>
  <img id="img6"/>
</div>
<script type="text/javascript">
  function test(canvas, img, premultipliedAlpha, alpha, preserveDrawingBuffer) {
    var gl = canvas.getContext("experimental-webgl", {
      premultipliedAlpha: premultipliedAlpha, 
      alpha: alpha,
      preserveDrawingBuffer: preserveDrawingBuffer
    });
    var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
    var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
    var program = createProgram(gl, [vertexShader, fragmentShader]);
    gl.useProgram(program);
    var positionLocation = gl.getAttribLocation(program, "a_position");
    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
        -1.0, -1.0,
        1.0, -1.0,
        -1.0,  1.0,
        1.0, -1.0,
        1.0,  1.0]),
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
    gl.drawArrays(gl.TRIANGLES, 0, 5);
    img.src = canvas.toDataURL();
  }
  window.onload = function() {
    test(document.getElementById("canvas1"), document.getElementById("img1"), true, true, false);
    test(document.getElementById("canvas2"), document.getElementById("img2"), false, true, false);
    test(document.getElementById("canvas3"), document.getElementById("img3"), false, false, false);
    test(document.getElementById("canvas4"), document.getElementById("img4"), true, true, true);
    test(document.getElementById("canvas5"), document.getElementById("img5"), false, true, true);
    test(document.getElementById("canvas6"), document.getElementById("img6"), false, false, true);
  };
</script>

Answer 1

在Mac和iPhone上的Safari中，当premultipliedAlpha: false在创建webgl上下文时，toDataURL返回一个垂直翻转的图像。

这个错误在2021年仍然存在于Safari中。作为一种变通方法，我们可以复制到具有2d上下文的画布，将画布数据复制到其中并调用toDataURL。

function getDataUrl(origCanvas, mimeType){
        var canvas = document.createElement( 'canvas' );
        canvas.width = origCanvas.width;
        canvas.height = origCanvas.height;
        var destCtx = canvas.getContext('2d');
        if(!destCtx) {
            console.error("Cannot create context")
            return ""
        }
        destCtx?.drawImage(origCanvas, 0, 0);
        return destCtx.canvas.toDataURL(mimeType);
}

Answer 2

我自己也遇到了这个问题。我认为这只是safari中的一个错误：当您在获取gl上下文时设置premultipliedAlpha:false时，canvas.toDataURL（）将返回一个倒置的图像。向苹果发送错误报告。