Re: [w3c/FileAPI] add dataURL method (#136)

On use case could be reading **image** blobs.
And asynchronize the existing method reader.**readAsDataURL**(blob).

Snippet / Example :

```javascript
// Top level code
// Read an url image and convert it to webp in the browser
// (for information, currently, this code runs in a worker)

const result = await fetch(url);
const blob = await result.blob();
const bmp = await createImageBitmap(blob);
const canvas = new self.OffscreenCanvas(width, height);
const o = {
  alpha: false,
  desynchronized: true,
  preserveDrawingBuffer: true
}
const ctx = canvas.getContext('2d', o);
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(bmp, 0, 0, width, height);
const blob = await canvas.convertToBlob({ type: 'image/webp', quality: 0.8 });

const dataUrl = await blobToDataUrl(blob); // <-- To replace with "await blob.dataUrl()"

console.log(`dataUrl`, dataUrl.toString().substring(0, 50));
// Then message the dataUrl to main thread and upload it to Firebase Storage.
// ...etc.


// ---------------------------------------------


// Would be nice to replace this function 
// with a "await blob.dataUrl()"
// 
// Convert a blob to a dataUrl

const blobToDataUrl = async (blob) => {
  // Promise function
  const f = (resolve, reject) => {
    // Create new FileReader
    const reader = new FileReader();
    // Define error listener
    reader.addEventListener('error', () => {
      reject(false);
    }, { passive: true });
    // Define success listener
    reader.addEventListener('load', () => {
      if (!reader.result) {
        reject();
        return;
      }
      resolve(reader.result);
    }, { passive: true });
    // Read
    reader.readAsDataURL(blob);  // <----- AHA .readAsDataURL
  };
  return new Promise(f);
}
```



-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/FileAPI/issues/136#issuecomment-517358793