웹 작업자에게 실행중인 asm.js 코드로 이미지를 생성하고 싶습니다. 그리고 나는 그 계산의 최신 상태를 사용자가 볼 수있는 2 차원 캔버스에 다른 일부 내용과 함께 정기적으로 합성하고 싶습니다. 현재 제가createImageBitmap safari에서 대안
- 가 asm.js 코드에 의해 사용되는 배열 버퍼의 일부에 기초 its constructor를 사용
ImageData
객체를 구축 코드 - 통화
createImageBitmap
가ImageBitmap
으로ImageData
우회전을 - transfers 작업자에서 GUI 스레드로 이미지 비트 맵을 보내고
- 은
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에 있지만, 다른 질문이 많은 질문이 있습니다.
이것은 PNG 파일에서 이미지를로드에서
Worker
에서
ImageData
개체를 만들 필요가 없습니다. 따라서 입력 된 배열에 저장되는 동안 원시 픽셀 데이터가 아닙니다. 이 방법을 복제하려면 픽셀 데이터를 PNG로 인코딩해야하는데 시간이 걸리고 일부 라이브러리 또는 PNG 헤더, 행 헤더 삽입 및 최소 수축 인코딩을위한 자체 작성 코드가 필요합니다.비 압축 스토어 방법 만 사용). 그래도 실행 가능한 옵션 일 수 있습니다. 특히 더 나은 방법이 없으면 감사합니다. – MvG@MvG'imgData'의'buffer'를'postMessage'에서 주 스레드로 전송할 수 있습니다.'.putImageData'를'.drawImage'로 대체 할 수 있습니다; 업데이트 된 게시물을 참조하십시오. – guest271314
내가 올바르게 따라 갔다면 마지막 부분에서 작업자 (https://jsfiddle.net/Kaiido/234ekx4b/)에 ImageData 객체를 만들 필요가 없습니다. – Kaiido