JS HTML

HOW TO CROP IMAGES IN JAVASCRIPT

(quick guide & example)

CROP IMAGE HTML

01

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

CROP IMAGE JAVASCRIPT

02

COPY PART OF SOURCE ONTO CANVAS img.onload = () => {   let ctx = document.getElementById   ("demo").getContext("2d");   ctx.drawImage(img,     SOURCE X, Y, WIDTH, HEIGHT     170, 20, 300, 300,     DESTINATION X, Y, WIDTH, HEIGHT     0, 0, 300, 300   ); };

GO! img.src = "IMAGE.JPG";

NEW IMAGE OBJECT var img = new Image();

CREATE ANCHOR let a = document.createElement("a")      c = document.getElementById("demo");

DOWNLOAD CROPPED IMAGE

03

SET LINK & "FORCE DOWNLOAD" a.href = c.toDataURL("image/png"); a.download = "cropped.png"; a.click();

CLEAN UP a.remove();

* A.CLICK() MAY NOT ALWAYS WORK! * BETTER TO LET USERS CLICK ON LINK.