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

问题描述

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

I have a canvas with webGL-drawings, created by Blend4Web framework.

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

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

除iOS(iphone和ipad)外，所有平台均可正常运行

All platforms works perfect, except iOS (iphone & ipad)

我了解webGL的各个方面: Canvas toDataURL()返回空白图像仅在Firefox 中，启用了 preserveDrawingBuffer .

I know about webGL aspects: Canvas toDataURL() returns blank image only in Firefox, preserveDrawingBuffer is enabled.

我也了解iOS的局限性: iOS HTML5 Canvas toDataURL ，但是canvas是很小，甚至100×500px的图像都是空白(为0.05MP，限制为3MP).

Also, I know about limitations in iOS: iOS HTML5 Canvas toDataURL, but canvas is small, even 100×500px images are blank (it is 0,05MP, limit is 3MP).

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

I use toDataURL() to send graphic information on server.

推荐答案

以下是 toDataURL 的polyfill.为了使 toBlob 在iOS上运行，您需要一个附加的polyfill，我建议使用以下polyfill: https://github.com/blueimp/JavaScript-Canvas-to-Blob .基本上只需下载canvas-to-blob.min.js .我会建议其他人直接进行 toDataURL polyfill，但是我找不到.

The following is a polyfill of toDataURL. In order to get toBlob to work on iOS, you need an additional polyfill, I recommend the following polyfill: https://github.com/blueimp/JavaScript-Canvas-to-Blob. Basically just download the canvas-to-blob.min.js. I would have recommended a direct toDataURL polyfill by someone else, but I could not find one.

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

这篇关于webgl canvas的toDataURL()仅在iOS中返回透明图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！