I need the data url of the image to be in:
'data:image/jpeg;base64,""'.
format
So my first solution is to render the uploaded image as an Image element, and use canvas.drawImage(imageElement), to get canvas.toDataURL(), but I'm getting the canvas has been tainted Error.
Curious is there any alternative way to get the data url of the uploaded image?
Thanks.
You don't need a canvas. You can just use the File API.
const element = document.getElementById('file');
element.addEventListener('change', ({target: {files}}) => {
const [image] = files;
const reader = new FileReader();
reader.onload = ({target: {result}}) => console.log(result);
reader.readAsDataURL(image);
});<input id="file" type="file">