createImageBitmap safari에서 대안

Question

웹 작업자에게 실행중인 asm.js 코드로 이미지를 생성하고 싶습니다. 그리고 나는 그 계산의 최신 상태를 사용자가 볼 수있는 2 차원 캔버스에 다른 일부 내용과 함께 정기적으로 합성하고 싶습니다. 현재 제가

1. 가 asm.js 코드에 의해 사용되는 배열 버퍼의 일부에 기초 its constructor를 사용 ImageData 객체를 구축 코드
2. 통화 createImageBitmap가 ImageBitmap으로 ImageData 우회전을
3. transfers 작업자에서 GUI 스레드로 이미지 비트 맵을 보내고
4. 은 CanvasRenderingContext2D.drawImage의 인수로 ImageBitmap을 사용합니다.

최근 크롬과 파이어 폭스에서 제대로 작동하지만 Safari 9.1.3에는 분명히 createImageBitmap 기능이 없습니다. Safari에서 작동하는 방식으로 위와 같이 할 수 있습니까?

저비용 이미지 인코딩이 있습니까? data:image/png…을 만들지 않으십니까? 바이트 배열을 drawImage에 공급할 수있는 다른 방법으로 바꾸는 다른 방법이 있습니까?

By 덧붙여 : 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); 
}; 

다음은 내 현재의 접근 방식에 대한 코드를보고 원하는 경우

---

, 여기에 내 근로자의 관련 부분이다 실제로 unabridged 코드는 this GitHub pull request에 있지만, 다른 질문이 많은 질문이 있습니다.

Answer 1

뭔가 drawImage에 당신이 할 수있는 공급에 바이트 배열을 설정하는 다른 방법이 있나요?

Uint8ClampedArray 개의 ArrayBuffer 개를 주 스레드에 게시 할 수 있습니다. 주 스레드에서 .putImageData()을 사용하여 .drawImage()을 대체하십시오. @Kaiido로 표시, 메인 스레드

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