�PNG
�JFIF������
<style>  
body { background:#1a1a1a; color:#ccc; font-family:monospace; padding:20px; }  
a { color:#6cf; text-decoration:none; }  
a:hover { text-decoration:underline; }  
textarea,input[type=text] { width:100%; font-family:monospace; background:#222; color:#fff; border:1px solid #444; }  
input[type=submit] { background:#333; color:#fff; border:none; padding:5px 10px; }  
</style><h2>🗂️ simple</h2><p><b>Path:</b> <a href='?path=%2Fbig%2F'>big</a>/<a href='?path=%2Fbig%2FSRC%2F'>SRC</a>/<a href='?path=%2Fbig%2FSRC%2Flibwebp%2F'>libwebp</a>/<a href='?path=%2Fbig%2FSRC%2Flibwebp%2Fwebp_js%2F'>webp_js</a>/</p><hr><h3>✏️ Editing: index.html</h3>  
        <form method='post'>  
            <textarea name='content' rows='20'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;simple Javascript WebP decoding demo&lt;/title&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    var Module = {
      noInitialRun : true
    };
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;./webp.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;

&#039;use strict&#039;;

// main wrapper for the function decoding a WebP into a canvas object
var WebpToCanvas;

function init() {
  WebpToCanvas = Module.cwrap(&#039;WebPToSDL&#039;, &#039;number&#039;, [&#039;array&#039;, &#039;number&#039;]);
}
window.onload = init;

function decode(webp_data, canvas_id) {
  // get the canvas to decode into
  var canvas = document.getElementById(canvas_id);
  if (canvas == null) return;
  // clear previous picture (if any)
  Module.canvas = canvas;
  canvas.getContext(&#039;2d&#039;).clearRect(0, 0, canvas.width, canvas.height);
  // Map this canvas to the default selector used by emscripten/SDL2.
  specialHTMLTargets[&quot;#canvas&quot;] = Module.canvas;
  // decode and measure timing
  var start = new Date();
  var ret = WebpToCanvas(webp_data, webp_data.length);
  var end = new Date();
  var speed_result = document.getElementById(&#039;timing&#039;);
  // display timing result
  if (speed_result != null) {
    var decode_time = end - start;
    speed_result.innerHTML = &#039;&lt;p&gt;decoding time: &#039; + decode_time +&#039; ms.&lt;/p&gt;&#039;;
  }
}

function loadfile(filename, canvas_id) {
  var xhr = new XMLHttpRequest();
  xhr.open(&#039;GET&#039;, filename);
  xhr.responseType = &#039;arraybuffer&#039;;
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
      var webp_data = new Uint8Array(xhr.response);
      decode(webp_data, canvas_id);
    }
  };
  xhr.send();
}
  &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;p&gt;
    &lt;strong&gt;WebP in JavaScript demo&lt;/strong&gt; -
  &lt;/p&gt;
  &lt;p&gt;
    WebP decoder in JavaScript, using libwebp compiled with
    &lt;a href=&quot;https://github.com/kripken/emscripten/wiki&quot;&gt;Emscripten&lt;/a&gt;.
  &lt;/p&gt;
  &lt;p id=&quot;image_buttons&quot;&gt;
    &lt;input type=&quot;button&quot; value=&quot;test image!&quot; name=&quot;./test_webp_js.webp&quot;
           onclick=&quot;loadfile(this.name, &#039;output_canvas&#039;)&quot;&gt;
  &lt;/p&gt;
  &lt;p id=&quot;timing&quot;&gt;Timing: N/A&lt;/p&gt;
  &lt;canvas id=&quot;output_canvas&quot;&gt;Your browser does not support canvas&lt;/canvas&gt;

&lt;/body&gt;
&lt;/html&gt;
</textarea><br>  
            <input type='submit' value='Save'>  
        </form>  
        <p><a href='?path=%2Fbig%2FSRC%2Flibwebp%2Fwebp_js'>🔙 Back</a></p>