CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml5-canvas
Faizal
Faizal

Reputation: 1345

Convert html img element to canvas

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 ?

Upvotes: 1

Views: 7850

Answers (3)

Shomz
Shomz

Reputation: 37701

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>

Upvotes: 6

prajakta
prajakta

Reputation: 162

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

Upvotes: 0

Rafał Łużyński
Rafał Łużyński

Reputation: 7312

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

Upvotes: 3

Related Questions