Safari 上的 createImageBitmap 替代方案

Question

我想在网络工作者上运行的一些 asm.js 代码中生成图像。我想定期将该计算的最新状态与一些其他内容一起合成到用户可见的 2d 画布上。目前我有代码

1. 根据 asm.js 代码使用的数组缓冲区的一部分，ImageData使用其构造函数构造一个对象，
2. 调用createImageBitmap打开ImageData成ImageBitmap，
3. 将该图像位图从工作线程传输到 GUI 线程并
4. 将其ImageBitmap用作CanvasRenderingContext2D.drawImage.

最近的 Chrome 和 Firefox 运行良好，但 Safari 9.1.3 显然没有createImageBitmap功能。我将如何以适用于 Safari 的方式执行上述操作？

是否有一些低成本的图像编码，而没有为其创建一个data:image/png…？有没有其他方法可以将字节数组转换为您可以提供的内容drawImage？

顺便说一下：http : //caniuse.com/目前没有列出这个功能。有一个功能请求，如果您想在那里查看此功能，则可以请求该功能。

---

如果您更喜欢查看我当前方法的代码，这里是我的工作人员的相关部分：

var buffer = new ArrayBuffer(bufferSize);
var asm = Module.asm(self, {}, buffer);
var imgBytes = new Uint8ClampedArray(buffer, offset);
var imgData = new ImageData(imgBytes, width, height);
createImageBitmap(imgData).then(function(bmp) { // Not available on Safari!
    postMessage(bmp, [bmp]);
});

这里是相应的 GUI 线程代码：

var worker = new Worker(‹url of worker›);
worker.onmessage = function(msg) {
    var img = msg.data;
    context2d.drawImage(img, 0, 0, width, height);
};

实际未删节的代码在这个 GitHub pull request 中，但是还有很多其他的东西与手头的问题无关。

Answer 1

有没有其他方法可以将字节数组转换为您可以提供的内容drawImage？

您可以张贴ArrayBuffer的Uint8ClampedArray对象主线程; 在主线程替代使用.putImageData()for .drawImage()。正如@Kaiido 所指出的，没有必要ImageData在Worker

var imgBytes = new Uint8ClampedArray(buffer, offset);
postMessage(imgBytes.buffer, [imgBytes.buffer]);

在主线程

worker.onmessage = function(e) {
  console.log(e.data); // `ArrayBuffer`
  ctx.putImageData(new ImageData(new Uint8ClampedArray(e.data), width, height), 0, 0);
}

http://plnkr.co/edit/N0v1YQHQX2rdFfHcOKeR?p=preview