webgl画布的toDataURL()仅在iOS中返回透明图像

Question

我有一个画布与webGL绘图，由Blend4Web框架创建。

我尝试使用toDataURL()保存图像

image= $('canvas')[0].toDataURL();

除了iOS (iphone和ipad)，所有的平台都运行得很完美。

我知道webGL方面：Canvas toDataURL() returns blank image only in Firefox，preserveDrawingBuffer是启用的。

此外，我知道iOS：iOS HTML5 Canvas toDataURL的限制，但画布很小，即使是100×500px的图像也是空白的(它是0.05MP，限制是3MP)。

我使用toDataURL()在服务器上发送图形信息。

Answer 1

以下是toDataURL的多边形填充。为了让toBlob在iOS上工作，你需要一个额外的polyfill，我推荐下面的polyfill：https://github.com/blueimp/JavaScript-Canvas-to-Blob。基本上只需下载canvas-to-blob.min.js即可。我会推荐其他人直接使用toDataURL polyfill，但我找不到。

if (typeof HTMLCanvasElement.prototype.toDataURL !== "function") {
  HTMLCanvasElement.prototype.toDataURL = function() {
    this.toBlob(function (blob) {
      var fileReader = new FileReaderSync();
      return fileReader.readAsDataURL(blob);
    });
  };
}

Answer 2

1)尝试在超时后获取图像

window.setTimeout(function(){var result = $('canvas')[0].toDataURL();
},100);

2)在获取图片url之前，可以查看canvas中是否有透明像素

var canvas = $('canvas')[0];
var ctx = canvas .getContext("2d")
var data = ctx.getImageData(0,0,canvas .width,canvas .height);
console.dir(data);//empty pixel it is each [0,0,0,0] array (rgba(0,0,0,0))

3)试着把你的画布写在其他画布上

var canvas = $('canvas')[0];
var tmpCanvas = document.createElement("canvas");
tmpCanvas.width = canvas.width;
tmpCanvas.height = canvas.height;
tmpCanvas.getContext("2d").drawImage(canvas,0,0,tmpCanvas.width,tmpCanvas.height,0,0,tmpCanvas.width,tmpCanvas.height);
var result = tmpCanvas.toDataURL(); 

4)尝试将blobs发送到服务器，而不是base64，它对内存更友好：https://stackoverflow.com/a/34924715/5138198

5)或者更好的做法是阅读这篇文章：https://stackoverflow.com/a/45223017/5138198