Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
880 views
in Technique[技术] by (71.8m points)

javascript - createImageBitmap alternative on Safari

I'd like to generate images in a bit of asm.js code running on a web worker. And I'd like to regularly composite the latest state of that computation onto a user-visible 2d canvas, together with some other content. Currently I have code which

  1. constructs an ImageData object using its constructor, based on a portion of the array buffer used by the asm.js code,
  2. calls createImageBitmap to turn the ImageData into an ImageBitmap,
  3. transfers that image bitmap from the worker to the GUI thread and
  4. uses that ImageBitmap as an argument to CanvasRenderingContext2D.drawImage.

Things work nicely in recent Chrome and Firefox, but Safari 9.1.3 apparently has no createImageBitmap function. How would I do something like the above in a way that works on Safari?

Is there some low-cost encoding of images, short of creating a data:image/png… for it? Is there some other way to turn a byte array into something you can feed to drawImage?

By the way: http://caniuse.com/ currently doesn't list this feature. There is a feature request which you can ?? if you would like to see this feature monitored there.


If you prefer to see code for my current approach, here is the relevant portion of my worker:

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

and here the corresponding GUI thread code:

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

The actual unabridged code is in this GitHub pull request, but there is a lot of other stuff which is irrelevant for the question at hand.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Is there some other way to turn a byte array into something you can feed to drawImage?

You can post the ArrayBuffer of Uint8ClampedArray object to main thread; at main thread substitute using .putImageData() for .drawImage(). As indicated by @Kaiido, it is not necessary to create an ImageData object at Worker

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

at main thread

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...