API de JavaScript para recortar imágenes

Primeros pasos con Cropper

La forma recomendada de instalar cropper a través de NPM. Utilice el siguiente comando para instalarlo.

 npm install cropperjs 

Recortar imágenes dentro de aplicaciones de JavaScript

La biblioteca Cropper brinda a los programadores de software la capacidad de recortar sus imágenes mediante programación usando JavaScript. Para recortar una imagen, debe cargar la imagen y asegurarse de que el tamaño de la imagen se ajuste perfectamente al contenedor. Una vez que tenga su imagen lista, puede realizar un conjunto de funciones de recorte en las coordenadas x e y dadas, que incluyen rotar, voltear, escalar y configurar la altura y el ancho según sus requisitos. .

 // vars
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', e => {
  if (e.target.files.length) {
    // start file reader
    const reader = new FileReader();
    reader.onload = e => {
      if (e.target.result) {
        // create new image
        let img = document.createElement('img');
        img.id = 'image';
        img.src = e.target.result;
        // clean result before
        result.innerHTML = '';
        // append new image
        result.appendChild(img);
        // show save btn and options
        save.classList.remove('hide');
        options.classList.remove('hide');
        // init cropper
        cropper = new Cropper(img);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  }
});
// save on click
save.addEventListener('click', e => {
  e.preventDefault();
  let imgSrc = cropper.getCroppedCanvas({
    width: img_w.value // input value
  }).toDataURL();
  cropped.classList.remove('hide');
  img_result.classList.remove('hide');
  cropped.src = imgSrc;
  dwn.classList.remove('hide');
  dwn.download = 'imagename.png';
  dwn.setAttribute('href', imgSrc);
});

Recortar imágenes en el navegador usando JavaScript

Puede agregar la funcionalidad de recorte de imágenes en sus aplicaciones y los usuarios pueden recortar imágenes directamente desde el navegador. Los usuarios pueden cargar o arrastrar y soltar imágenes en el navegador y aplicarle funciones de recorte. La API proporciona compatibilidad entre navegadores. La API funciona bien con la última versión de Chrome, Firefox, Safari, Opera, Edge e Internet Explorer.

 //instantiate Cropper
var cropper = canvas.cropper({
  aspectRatio: 16 / 9
});
//Crop Image
$('#btnCrop').click(function() {
  // Get a string base 64 data url
  var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
  $result.append( $('').attr('src', croppedImageDataURL) );
});

Uso de métodos de recorte en JavaScript

Para brindar flexibilidad, la API proporciona varios métodos para recortar imágenes. Estos métodos ayudan al desarrollador a agregar fácilmente funciones de recorte de imágenes a la aplicación. La API proporciona el método crop() para recortar la imagen. Además, puede usar restablecer(), borrar(), reemplazar(), habilitar(), deshabilitar(), destruir(), mover(), zoom(), rotar(), escalar(), obtener datos(), establecer datos (), getCanvasData() y más.

 cropper.zoomTo(1); // 1:1 (canvasData.width === canvasData.naturalWidth)
const containerData = cropper.getContainerData();
// Zoom to 50% from the center of the container.
cropper.zoomTo(.5, {
  x: containerData.width / 2,
  y: containerData.height / 2,
});