Convert html img element to canvas

Question

I have html page with content as

<div class="span12">
    <img id="myImg" src="myImage.png" style="max-width: 100%; height: auto;" />
</div>

where the actual size of myImage.png is 1600 * 900 . The image is rendered with size 796 * 448 (streched keeping the aspect ratio).

I am trying to convert the img element(with size 796 * 448) to a canvas element using javascript as

function convertImgToCanvas(){
    var myImgElement = document.getElementById("myImg");
    var myCanvasElement = document.createElement("canvas");
    myCanvasElement.width = myImgElement.width;
    myCanvasElement.height = myImgElement.height;
    var context = myCanvasElement.getContext('2d');
    context.drawImage(myImgElement,0,0);    
}

The resulting canvas has a size 1600 * 900 , not 796 * 448 . I am expecting the size of canvas to be 796 * 448 .

If I set the height and width of canvas as

myCanvasElement.width = '796px';
myCanvasElement.height = '448px';

the size of canvas become 796 * 448 , but image is cropped

Is there any solution to create a canvas from img element, with exactly same width and height as that of img element, without cropping the image ?

Answer 1

You're not using drawImage correctly. See here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

The third example allows you to specify x,y,width and height parameter of both source and destination: ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

So the easiest fix in your case would be something like:

context.drawImage(myImgElement, 0, 0, 1600, 900, 0, 0, 796, 448);  

And here it is in action (go Full Page because of the size):

 function convertImgToCanvas(){ var myImgElement = document.getElementById("myImg"); var myCanvasElement = document.createElement("canvas"); // don't forget to add it to the DOM!! document.body.appendChild(myCanvasElement); myCanvasElement.width = 796; myCanvasElement.height = 448; var context = myCanvasElement.getContext('2d'); context.drawImage(myImgElement, 0, 0, 1600, 900, 0, 0, 796, 448); // remove the image for the snippet myImgElement.style.display = 'none'; } convertImgToCanvas();

 <div class="span12"> <img id="myImg" src="https://via.placeholder.com/1600x900" style="max-width: 100%; height: auto;" /> </div>

Answer 2

You can do it with scale .

function convertImgToCanvas(){
    var myImgElement = document.getElementById("myImg");
    var myCanvasElement = document.createElement("canvas");
    myCanvasElement.width = myImgElement.width;
    myCanvasElement.height = myImgElement.height;
    var context = myCanvasElement.getContext('2d');
    context.scale(myCanvasElement.width / myImgElement.width, myCanvasElement.height / myImgElement.height);
    context.drawImage(myImgElement, 0, 0);   
}

Answer 3

Check link given below. You can convert image to HTML5 canvas element: http://lab.abhinayrathore.com/img2canvas/