JS HTML
(quick guide & example)
JUST AN EMPTY CANVAS <canvas id="demo" width="300" height="300"></canvas>
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");
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.