2016-10-17 7 views
1

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

  1. 가 asm.js 코드에 의해 사용되는 배열 버퍼의 일부에 기초 its constructor를 사용 ImageData 객체를 구축 코드
  2. 통화 createImageBitmapImageBitmap으로 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에 있지만, 다른 질문이 많은 질문이 있습니다.

답변

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

+0

이것은 PNG 파일에서 이미지를로드에서 Worker

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

에서 ImageData 개체를 만들 필요가 없습니다. 따라서 입력 된 배열에 저장되는 동안 원시 픽셀 데이터가 아닙니다. 이 방법을 복제하려면 픽셀 데이터를 PNG로 인코딩해야하는데 시간이 걸리고 일부 라이브러리 또는 PNG 헤더, 행 헤더 삽입 및 최소 수축 인코딩을위한 자체 작성 코드가 필요합니다.비 압축 스토어 방법 만 사용). 그래도 실행 가능한 옵션 일 수 있습니다. 특히 더 나은 방법이 없으면 감사합니다. – MvG

+0

@MvG'imgData'의'buffer'를'postMessage'에서 주 스레드로 전송할 수 있습니다.'.putImageData'를'.drawImage'로 대체 할 수 있습니다; 업데이트 된 게시물을 참조하십시오. – guest271314

+1

내가 올바르게 따라 갔다면 마지막 부분에서 작업자 (https://jsfiddle.net/Kaiido/234ekx4b/)에 ImageData 객체를 만들 필요가 없습니다. – Kaiido