Extract data uri from image

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

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

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.

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

2.2 KiB Raw Permalink Blame History

Extract data uri from image

2.2 KiB

Raw Permalink Blame History