createImageBitmapサファリの代替

Question

ウェブワーカーで実行されているasm.jsコードで画像を生成したいと思います。そして、私はその計算の最新の状態をユーザが見ることができる2Dキャンバスに、他のいくつかのコンテンツと共に定期的に合成したいと思います。現在、私は

1. が
2. 、ImageBitmapにImageDataを回すために、asm.jsコードによって使用される配列バッファの部分に基づいて、
3. コールcreateImageBitmapをits constructorを用いImageDataオブジェクトを構築するコードを有しますtransfersワーカーからGUIスレッドへの画像ビットマップ
4. は、CanvasRenderingContext2D.drawImageの引数としてImageBitmapを使用します。

最近のChromeとFirefoxではうまく動作しますが、Safari 9.1.3には明らかにcreateImageBitmap機能がありません。 私はSafariで動作する方法で、上記のようなことをどうしたらよいですか？

イメージの低コストエンコーディングはありますか？data:image/png…の作成には至りません。バイト配列をdrawImageに送ることができる何か他の方法がありますか？

ところでhttp://caniuse.com/は現在この機能をリストしていません。この機能が監視されているかどうかを確認するには、a feature requestがあります。

---

あなたは私の現在のアプローチのためのコードを確認したい場合は、ここで私の労働者の関連部分である：

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); 
}; 

実際のコード化されていないコードはthis GitHub pull requestにありますが、手元の質問とは関係のない他の多くのものがあります。

Answer 1

あなたは drawImageに供給できるものにバイト配列を有効にするいくつかの他の方法はありますか？

Uint8ClampedArrayのArrayBufferをメインスレッドに投稿できます。メインスレッドの代用品では、.putImageData()を.drawImage()に使用してください。 @Kaiidoによって示されるように、PNGファイルからイメージをロード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