title: createImageBitmap alternative on Safari
body: <p>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</p>
  
  <ol>
  <li>constructs an <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData" rel="noreferrer"><code>ImageData</code></a> object using <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData" rel="noreferrer">its constructor</a>, based on a portion of the array buffer used by the asm.js code,</li>
  <li>calls <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapFactories/createImageBitmap" rel="noreferrer"><code>createImageBitmap</code></a> to turn the <code>ImageData</code> into an <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap" rel="noreferrer"><code>ImageBitmap</code></a>,</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage" rel="noreferrer">transfers</a> that image bitmap from the worker to the GUI thread and</li>
  <li>uses that <code>ImageBitmap</code> as an argument to <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage" rel="noreferrer"><code>CanvasRenderingContext2D.drawImage</code></a>.</li>
  </ol>
  
  <p>Things work nicely in recent Chrome and Firefox, but Safari 9.1.3 apparently has no <code>createImageBitmap</code> function. <strong>How would I do something like the above in a way that works on Safari?</strong></p>
  
  <p>Is there some low-cost encoding of images, short of creating a <code>data:image/png…</code> for it? Is there some other way to turn a byte array into something you can feed to <code>drawImage</code>?</p>
  
  <p>By the way: <a href="http://caniuse.com/" rel="noreferrer">http://caniuse.com/</a> currently doesn't list this feature. There is <a href="https://github.com/Fyrd/caniuse/issues/2801" rel="noreferrer">a feature request</a> which you can  if you would like to see this feature monitored there.</p>
  
  <hr>
  
  <p>If you prefer to see code for my current approach, here is the relevant portion of my worker:</p>
  
  <pre><code>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]);
  });
  </code></pre>
  
  <p>and here the corresponding GUI thread code:</p>
  
  <pre><code>var worker = new Worker(‹url of worker›);
  worker.onmessage = function(msg) {
      var img = msg.data;
      context2d.drawImage(img, 0, 0, width, height);
  };
  </code></pre>
  
  <p>The actual unabridged code is in <a href="https://github.com/CindyJS/CindyJS/pull/517" rel="noreferrer">this GitHub pull request</a>, but there is a lot of other stuff which is irrelevant for the question at hand.</p>