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

Question

我有一个带有webGL绘图的画布,由Blend4Web框架创建.

我尝试使用toDataURL()以下方法保存图像:

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

所有平台都很完美,除了iOS(iphone和ipad)

我知道webGL方面:Canvas toDataURL()仅在Firefox中返回空白图像,preserveDrawingBuffer已启用.

另外,我知道iOS中的限制:iOS HTML5 Canvas toDataURL,但画布很小,甚至100×500px图像都是空白的(它是0,05MP,限制是3MP).

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

Answer 1

以下是 的 polyfill 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);
    });
  };
}