PD: No es un duplicado, ya que tiene una función de recorte múltiple.

Estoy creando una aplicación de recorte de imágenes con múltiples áreas de recorte de secciones , después de mucho intentarlo e investigar, encontré que Jcrop es útil. Ahora estoy tratando de crear una interfaz en la que el cliente pueda cargar su imagen por sí mismo y luego recortarla fácilmente.

• En el siguiente HTML, hay una imagen estática a partir de ahora y un botón de carga también donde el usuario puede cargar y reemplazar la imagen estática en un lienzo.

Código HTML:

 <div style="padding:0 5%;"> <h1 style="font-family:Helvetica,sans-serif;"> Jcrop Example <span style="color:lightgray;">- draw some crops!</span> </h1> <img id="target" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg"> <div class="file btn btn-lg btn-primary"> Upload <input type="file" name="file" /> </div> </div>

JavaScript:

 var jcp; Jcrop.load('target').then(img => { jcp = Jcrop.attach(img, { multi: true }); const rect = Jcrop.Rect.sizeOf(jcp.el); jcp.newWidget(rect.scale(.7, .5).center(rect.w, rect.h)); jcp.focus(); }); function setImage(tag) { document.getElementById('target').src = 'https://d3o1694hluedf9.cloudfront.net/' + tag; }