javascript - 仅在 iOS 中返回透明图像的 webgl Canvas 的 toDataURL()

Question

我有一个带有 webGL 绘图的 Canvas ，由 Blend4Web 框架创建。

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

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

除 iOS(iphone 和 ipad)外，所有平台都完美运行

我了解 webGL 方面:Canvas toDataURL() returns blank image only in Firefox , preserveDrawingBuffer 已启用。

另外，我知道 iOS 的限制:iOS HTML5 Canvas toDataURL ，但是 Canvas 很小，即使是 100×500px 的图像也是空白的(它是 0,05MP，限制是 3MP)。

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

Answer 1

以下是 toDataURL 的 polyfill。为了让 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);
    });
  };
}