# Extract data uri from image

[https://mitch.codes/how-to-get-the-data-url-of-an-image-in-javascript/](https://mitch.codes/how-to-get-the-data-url-of-an-image-in-javascript/)

Normally we have to use callback function for image.onload just like in below image

```jsx
const avatarImg=new Image()
avatarImg.src=source // src of img  
avatarImg.onload = function() {
          var c = document.getElementById("myCanvas");
          var ctx = c.getContext("2d");
          ctx.canvas.width = avatarImg.width;
          ctx.canvas.height = avatarImg.height;

          ctx.drawImage(avatarImg, 0, 0);
        };
```

this is callback function

```jsx
function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var base64 = getBase64Image(document.getElementById("imageid"));
```

Using promises we can convert to async await to make it look like synchronous thus easier to use and debug.

```jsx
const createImage = (src) => {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.crossOrigin = "anonymous";
      image.src = src;

      image.onload = () => {
        resolve(image);
      };

      image.onerror = (e) => {
        reject(e);
      };
    });
  };

const getDataURL=async (src) => {
    
    const image = await createImage(src);
    const canvas = document.createElement("canvas");
    canvas.width = image.width;

    canvas.height = image.height;

    const ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0);
    const dataURL = canvas.toDataURL("image/png");
    return dataURL

}
```

Whole code to convert image http url and local file to data uri(base 64 encoded):

[Full codebase for conversion to data uri](../../../Export-9fad9947-5bd5-4195-952b-6512c5a4beb1/Web%20development%2083dd4e6675f04ba782a6865a434a0598/React%205b9af27e2c194a4cb22a32306e53c39f/Extract%20data%20uri%20from%20image%205610c5f6df1b49978b3a19/Full%20codebase%20for%20conversion%20to%20data%20uri%20ea49e40ac.md)