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：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）尝试一些tiomeout后获取图像

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

2）在获取图片网址之前，您可以检查画布是否有透明像素

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）尝试将blob发送到服务器而不是base64，它更加内存友好：https://stackoverflow.com/a/34924715/5138198

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

webgl canvas的toDataURL（）仅在iOS中返回透明图像

2 个答案: