JavaScript-API zum Zuschneiden von Bildern

Erste Schritte mit Cropper

Der empfohlene Weg, Cropper über NPM zu installieren. Bitte verwenden Sie den folgenden Befehl, um es zu installieren.

 npm install cropperjs 

Bilder in JavaScript-Apps zuschneiden

Die Kupfer-Bibliothek gibt Software-Programmierern die Möglichkeit, ihre Bilder mit JavaScript zu programmieren. Um ein Bild zuschneiden, müssen Sie das Bild laden und sicherstellen, dass die Größe des Bildes perfekt in den Container passt. Nachdem Sie Ihr Bild fertig gestellt haben, können Sie auf den angegebenen x- und y-Koordinaten eine Reihe von Zuschneidefunktionen ausführen, einschließlich rotieren, drehen, skalieren und Höhe und Breite einstellen.

 // 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);
});

Bilder im Browser mit JavaScript zuschneiden

Sie können Bildbearbeitungsfunktionen in Ihren Anwendungen hinzufügen und Benutzer können Bilder direkt aus dem Browser abschneiden. Die Benutzer können Bilder im Browser hochladen oder per Drag-Drop hochladen und dafür die Menüfunktionen anwenden. Die API bietet Cross-Browser-Kompatibilität. Der API funktioniert gut mit der neuesten Version von Chrome, Firefox, Safari, Opera, Edge und 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) );
});

Zuschneidemethoden in JavaScript verwenden

Um Flexibilität zu gewährleisten, stellt die API eine Reihe von Methoden zur Bildbearbeitung zur Verfügung. Diese Methoden helfen dem Entwickler, die Bildbearbeitungsfunktionen der Anwendung einfach hinzuzufügen. Die API stellt die Methode crop() bereit, um das Bild zu schneiden. Darüber hinaus können Sie reset(), clear(), replace(), enable(), disabled(), trace(), move(), zoom(), rotate(), scale(), getData(), setData(), getCanvasData und mehr verwenden.

 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,
});