73 lines
No EOL
2.2 KiB
Markdown
73 lines
No EOL
2.2 KiB
Markdown
# 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) |