title: How to convert Uint8ClampedArray of webp image picked from canvas to base64
body: <p>I'm trying to convert Uint8ClampedArray picked from webp images on canvas using the getImageData method.</p>
  
  <p>I've tried the method found in this thread: <a href="https://stackoverflow.com/questions/16194908/how-can-i-create-a-canvas-imagedata-array-from-an-arraybuffer-representation-of">How can I create a canvas imageData array from an arrayBuffer representation of a JPG</a></p>
  
  <p>The output I get is only this part:</p>
  
  <pre><code>AAAAAA==
  </code></pre>
  
  <p>How to get the full data. Here's how I tried unsuccessful:</p>
  
  <pre><code>function Uint8toBase64(idata) {
      this.idata = idata;
  
      var u = new Uint8ClampedArray(4);
  
      for (var i = 0; i &lt; idata.length; i += 4) {
          idata[0] = u[i];
          idata[1] = u[i + 1];
          idata[2] = u[i + 2];
          idata[3] = u[i + 3];
      }
  
      var str = String.fromCharCode.apply(null, u);
      var b64 = btoa(str);
  
      console.log(b64);
  }
  </code></pre>
  
  <p>Thanks in advance,</p>