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 bee 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 ?

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 bee 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 ?

• javascript
• jquery
• html
• css
• html5-canvas

3 Answers 3

You're not using drawImage correctly. See here: https://developer.mozilla/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./1600x900" style="max-width: 100%; height: auto;" />
</div>

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);   
}

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