1<!DOCTYPE html> 2<title>Image Decoding Demo</title> 3<meta charset="utf-8" /> 4<meta http-equiv="X-UA-Compatible" content="IE=edge"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 7<style> 8 canvas { 9 border: 1px dashed grey; 10 } 11 12 .canvas-container { 13 float: left; 14 } 15</style> 16 17<body> 18 <h1>CanvasKit loading images in a webworker (using browser-based decoders)</h1> 19 <p>NOTE: this demo currently only works in chromium-based browsers, where 20 <a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#Browser_compatibility"> 21 Offscreen Canvas 22 </a> 23 is supported. 24 </p> 25 26 <div class="canvas-container"> 27 <h2>Decoding on main thread</h2> 28 <canvas id="main-thread-canvas" width=500 height=500></canvas> 29 <div> 30 <button id="load-button-main">Decode Image on Main Thread</button> 31 <button id="load-button-web">Decode Image with Web Worker</button> 32 <button id="clear-button">Clear Image</button> 33 </div> 34 <p> 35 Notice that decoding the image on the main thread pauses the circle animation until the 36 image is ready to be drawn, where as decoding it in a webworker does not have this pause 37 (or at least not as drastic a pause). You may want to reload the page, as browsers are 38 smart enough to not have to re-decode the image on subsequent requests. 39 </p> 40 </div> 41 42</body> 43<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/canvaskit.js"></script> 44<script type="text/javascript" src="main.js"></script>