我们开发复杂的基于 WebGL 的应用程序,并为我们的用户提供保存当前场景屏幕截图的能力。虽然此功能在 Chrome 和 Firefox 中按预期工作,但我们在 safari 中遇到了几个问题。
请看下面的代码。如您所见,我们使用 CanvasElement 的 toDataURL() 方法进行截图。虽然此代码在其他浏览器中按预期工作,但它在 safari 中生成错误的图像(至少对于 WebGL 画布)。
您可以通过打开此文件或在 safari 和其他浏览器中运行附加的代码段来轻松地自己重现该问题。
我们做错了什么吗?这个问题有解决方法吗?
谢谢你。
UPD:特别是对于那些说它与 preserveDrawingBuffer 相关的人,我将其更改为附加的代码片段,以表明即使将 preserveDrawingBuffer 设置为 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>