Traté de explicar el código con comentarios:

 var jcp; Jcrop.load('target').then(img => { //You can enable multiple cropping with this line: jcp = Jcrop.attach(img,{multi:true}); }); //assuming you have a button with id="save" for exporting cropped areas var link=document.getElementById('save'); link.onclick = function(){ //we check if at least one crop is available if(jcp.active){ var i=0; var fullImg = document.getElementById("target"); //we are looping cropped areas for(area of jcp.crops){ i++; //creating temp canvas and drawing cropped area on it canvas = document.createElement("canvas"); canvas.setAttribute('width',area.pos.w); canvas.setAttribute('height',area.pos.h); ctx = canvas.getContext("2d"); ctx.drawImage(fullImg, area.pos.x, area.pos.y, area.pos.w, area.pos.h, 0, 0, area.pos.w, area.pos.h); //creating temp link for saving/serving new image temp = document.createElement('a'); temp.setAttribute('download', 'area'+i+'.jpg'); temp.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream")); temp.click(); } } };

EDITAR: como comentó, sería mejor si tuviéramos un cargador de imágenes local, podemos agregar una entrada de archivo a nuestro html

 <img id="target" /> <br/> <input type="file" id="imageLoader" name="imageLoader"/><!-- add this for file picker --> <button id="save">save</button>

y una función a nuestro js para manejarlo

 var jcp; var save=document.getElementById('save'); var imageLoader = document.getElementById('imageLoader'); var img = document.getElementById("target"); imageLoader.onchange=function handleImage(e){//handling our image picker <input>: var reader = new FileReader(); reader.onload = function(event){ img.src = event.target.result; } reader.readAsDataURL(e.target.files[0]); } save.onclick = function(){ if(jcp&&jcp.active){ var i=0; for(area of jcp.crops){ i++; canvas = document.createElement("canvas"); canvas.setAttribute('width',area.pos.w); canvas.setAttribute('height',area.pos.h); ctx = canvas.getContext("2d"); ctx.drawImage(img, area.pos.x, area.pos.y, area.pos.w, area.pos.h, 0, 0, area.pos.w, area.pos.h); temp = document.createElement('a'); temp.setAttribute('download', 'area'+i+'.jpg'); temp.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream")); temp.click(); } } }; Jcrop.load('target').then(img => { jcp = Jcrop.attach(img,{multi:true}); });

Sí, @keyhan tenía razón <input type="file"> es otra pregunta, pero aun así, les estoy dando una idea de cómo implementar el código de Kayhan anterior.

 <div> <input type="file" id="image-input" accept="image/*"> <!-- img id name should be "target" as it is also using by Jcrop --> <img id="target"></img> </div>

y ahora puede poner debajo del código JavaScript justo encima de setImage()

 <script> let imgInput = document.getElementById('image-input'); imgInput.addEventListener('change', function (e) { if (e.target.files) { let imageFile = e.target.files[0]; var reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("img"); img.onload = function (event) { var MAX_WIDTH = 1600; var MAX_HEIGHT = 800; var width = img.width; var height = img.height; // Change the resizing logic if (width > height) { if (width > MAX_WIDTH) { height = height * (MAX_WIDTH / width); width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width = width * (MAX_HEIGHT / height); height = MAX_HEIGHT; } } // Dynamically create a canvas element var canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; // var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // Actual resizing ctx.drawImage(img, 0, 0, width, height); // Show resized image in preview element var dataurl = canvas.toDataURL(imageFile.type); document.getElementById("target").src = dataurl; } img.src = e.target.result; } reader.readAsDataURL(imageFile); } }); </script>