1. Produkte
  2.   Bild
  3.   JavaScript
  4.   Cropper
 
  

JavaScript-API zum Zuschneiden von Bildern

Open-Source-JavaScript-Bibliothek, die das Zuschneiden von JavaScript-Apps unterstützt.

Kupfer ist eine Open-Source JavaScript-Bibliothek, die das Einschneiden von Bildern in Ihrem Browser ermöglicht. Mit den API können Sie Ihrer Anwendung mit 27 verschiedenen Methoden, 39 verschiedenen Optionen und 6 Veranstaltungen erweiterte Zuschneidefunktionen hinzufügen. Mit den API können Sie Ihre Bilder in Ihrem Browser einfach bearbeiten und bearbeiten.

Diese Bibliothek bietet Unterstützung für eine große Auswahl an Beschneidungsfunktionen. Es unterstützt das Anschneiden von Bildern über Touchscreen, boomen, rotieren, skalieren & drehen, mit mehrfachem Kupfer, erlaubt das Anschneiden von Bildern auf Leinwand mit Querbrowser.

Previous Next

Erste Schritte mit Cropper

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

Cropper über NPM 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.

Crop Image & Save It via JavaScript API

 // 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.

Crop Images Online via JavaScript

 //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.

Zoom Leinwand auf Absolut-Ratio über JavaScript

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