The question on a single line:
Is there a toDataURL
method working on a <IMG> element?
Most of the people seem to be interested in how to get an IMG from a CANVAS, but I need the opposite.
Why? I need to use the toDataURL()
method on the IMG.
So, this is the pseudo code that I wish existed in reality:
var img = document.getElementById('myImage');
var canvas = img.getCanvasFromImage();
var dataURL = canvas.toDataURL();
Is there already a method, or a workaround (e.g. creating an empty canvas, copying the IMG on top, etc.) to do the getCanvasFromImage? I couldn't find one.
Some more details WHY, but there is no need to read further.
I am using the VIDEO tag to get the camera stream, and when the user clicks a button, I copy the CANVAS to the IMG.
But since I do not want to show the whole picture while taking a photo (I want it to be consistent over different devices, regardless of the camera resolution, keeping a 16:9 aspect ratio), I only show a portion of the image using object-fit: cover;
.
So, now I have a "partial" image, but if I do a toDataURL on the canvas I have, it gives me the WHOLE picture, regardless of the "object-fit" value.
If this is not clear, no problem :) I only need a "toDataURL" method working on a <IMG> element :)
HTMLImageElement.prototype.getCanvasFromImage = function(){
const canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0);
return canvas;
};
const img = document.getElementById('myImage');
img.onload = () => {
const canvas = img.getCanvasFromImage();
const dataURL = canvas.toDataURL();
console.log(dataURL);
}
<img id="myImage" crossorigin="anonymous" src="https://dl.dropbox.com/s/zpoxft30lzrr5mg/20201012_102150.jpg" />
Its work, but please READ THIS. Better way is create pure function and pass image as argument:
function getCanvasFromImage(image) {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
return canvas;
}