HTML JS

RESIZE IMAGES IN JAVASCRIPT

(quick guide & examples)

IMAGE RESIZE HTML

01

JUST AN EMPTY CANVAS <canvas id="demo"></canvas>

JAVASCRIPT  RESIZE

02

NEW IMAGE + GET CANVAS var i = new Image(),        c = document.getElementById("demo"),       ctx = c.getContext("2d");

RESIZE ON IMAGE LOAD i.onload = () => {   let w = Math.floor(i.naturalWidth * 0.5),         h = Math.floor(i.naturalHeight * 0.5);         c.width = w; c.height = h;   ctx.drawImage(img, 0, 0, w, h); };

GO! i.src = "IMAGE.PNG";

RESIZED DOWNLOAD

03

CREATE DOWNLOAD LINK var a = document.createElement("a"); a.setAttribute("download", "R.PNG"); a.href = c.toDataURL("image/png");

THIS MAY NOT ALWAYS WORK a.click();

BETTER LET USERS CLICK ON LINK a.innerHTML = "Download"; document.body.appendChild(a);