1# ImageDecoder API 2 3Date Updated: June 16, 2020 4 5## Summary and Links 6 7The [ImageDecoder API](https://github.com/dalecurtis/image-decoder-api/blob/master/explainer.md) 8handles decoding of both still and animated images. 9Similar to the larger [web codecs](https://github.com/WICG/web-codecs/blob/master/explainer.md) 10proposal which is focused more on video and audio. 11The ImageDecoder API could be used with `CanvasKit.MakeImageFromCanvasImageSource` 12for creating CanvasKit compatible `SkImage`s. 13For still images, the `createImageBitmap(blob)` API achieves the same result. 14 15- [Explainer](https://github.com/dalecurtis/image-decoder-api/blob/master/explainer.md) 16- [Prototype](https://chromium-review.googlesource.com/c/chromium/src/+/2145133) 17- [Discourse](https://discourse.wicg.io/t/proposal-imagedecoder-api-extension-for-webcodecs/4418) 18 19Currently available as a prototype behind the `--enable-blink-features=WebCodecs` flag 20in Chrome Canary, works in version 85.0.4175.0. 21 22## Running the prototype 23 241. Download and install [Chrome Canary](https://www.google.com/chrome/canary/). Verify that you 25have version 85.0.4175.0 or later. 262. Close ALL open instances of chromium browsers, including chrome. 272. Run Chrome Canary with the `--enable-blink-features=WebCodecs` flag. 28 29**MacOS**: Run `/applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-blink-features=WebCodecs` 30 31**Windows, Linux**: [https://www.chromium.org/developers/how-tos/run-chromium-with-flags](https://www.chromium.org/developers/how-tos/run-chromium-with-flags) 32 333. Navigate to: [http://storage.googleapis.com/dalecurtis/test-gif.html?src=giphy.gif](http://storage.googleapis.com/dalecurtis/test-gif.html?src=giphy.gif) 344. You should see a cute animated cat illustration. 35 36## Example API Usage with CanvasKit 37 38With a still image: 39```jsx 40const response = await fetch(stillImageUrl); // e.g. png or jpeg 41const data = await response.arrayBuffer(); 42 43const imageDecoder = new ImageDecoder({ data }); 44const imageBitmap = await imageDecoder.decode(); 45 46const skImage = CanvasKit.MakeImageFromCanvasImageSource(imageBitmap); 47// do something with skImage, such as drawing it 48``` 49 50With an animated image: 51```jsx 52const response = await fetch(animatedImageUrl); // e.g. gif or mjpeg 53const data = await response.arrayBuffer(); 54 55const imageDecoder = new ImageDecoder({ data }); 56 57for (let frame = 0; frame < imageDecoder.frameCount; frame++) { 58 const imageBitmap = await imageDecoder.decode(frame); 59 const skImage = CanvasKit.MakeImageFromCanvasImageSource(imageBitmap); 60 // do something with skImage, such as drawing it 61} 62``` 63
){kind=link}