MvG MvG - 1 year ago 203
Javascript Question

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
    object using its constructor, based on a portion of the array buffer used by the asm.js code,

  2. calls
    to turn the
    into an

  3. transfers that image bitmap from the worker to the GUI thread and

  4. uses that
    as an argument to

Things work nicely in recent Chrome and Firefox, but Safari 9.1.3 apparently has no
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
for it? Is there some other way to turn a byte array into something you can feed to

By the way: currently doesn't list this feature. There is a feature request which you can

Answer Source

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(; // `ArrayBuffer`
  ctx.putImageData(new ImageData(new Uint8ClampedArray(, width, height), 0, 0);

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download