JS HTML

HOW TO CROP IMAGES IN JAVASCRIPT

CROP IMAGE HTML

01

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

CROP IMAGE JAVASCRIPT

02

CROP BY COPYING PART OF SOURCE IMAGE TO CANVAS var img = new Image(); 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); }; img.src = "IMAGE.JPG";