CODEWITHSUNDEEP
javascriptcanvas
qadenza
qadenza

Reputation: 9293

how to create smaller image

<img id='imgt' src='../img/crop.png' alt='img'>

Original size of imgt is larger than 960 x 540.
I need the same image in width 960px and height - auto.
Here is my try using canvas:

var c1 = document.createElement("canvas");
c1.width = 960;
var ctx = c1.getContext("2d");
var img=document.getElementById("imgt");
ctx.drawImage(img, 0, 0, 960, auto);

Console says - auto is not defined` but I have no idea what to put as height param.

I tired without height param: 

ctx.drawImage(img, 0, 0, 960);

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Valid arities are: [3, 5, 9], but 4 arguments provided.

Any help?

Is there maybe another way to produce smaller image, without canvas?

Upvotes: 0

Views: 142

Answers (1)

spankajd
spankajd

Reputation: 952

you can try following code.

var c1 = document.createElement("canvas");
c1.width = 960;
var ctx = c1.getContext("2d");
var img=document.getElementById("imgt");

var _curWidth = c1.width;
var _autoHeight = (_curWidth / img.naturalWidth) * img.naturalHeight

ctx.drawImage(img, 0, 0, _curWidth, _autoHeight);

Upvotes: 4

Related Questions