JavaScript API για περικοπή εικόνων

Ξεκινώντας με το Cropper

Ο προτεινόμενος τρόπος εγκατάστασης cropper μέσω NPM. Χρησιμοποιήστε την παρακάτω εντολή για να το εγκαταστήσετε.

 npm install cropperjs 

Περικοπή εικόνων μέσα σε εφαρμογές JavaScript

Η βιβλιοθήκη Cropper δίνει στους προγραμματιστές λογισμικού τη δυνατότητα να περικόψουν μέσω προγραμματισμού τις εικόνες τους χρησιμοποιώντας JavaScript. Για να περικόψετε μια εικόνα, πρέπει να φορτώσετε την εικόνα και να διασφαλίσετε ότι το μέγεθος της εικόνας ταιριάζει τέλεια στο κοντέινερ. Αφού ετοιμάσετε την εικόνα σας, μπορείτε να εκτελέσετε ένα σύνολο χαρακτηριστικών περικοπής στις δεδομένες συντεταγμένες x και y, συμπεριλαμβανομένης της περιστροφής, της αναστροφής, της κλιμάκωσης και της ρύθμισης ύψους και πλάτους σύμφωνα με τις απαιτήσεις σας. .

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

Περικοπή εικόνων στο πρόγραμμα περιήγησης χρησιμοποιώντας JavaScript

Μπορείτε να προσθέσετε λειτουργία περικοπής εικόνων στις εφαρμογές σας και οι χρήστες μπορούν να περικόψουν εικόνες απευθείας από το πρόγραμμα περιήγησης. Οι χρήστες μπορούν να ανεβάσουν ή να αποθέσουν εικόνες στο πρόγραμμα περιήγησης και να εφαρμόσουν λειτουργίες περικοπής σε αυτό. Το API παρέχει συμβατότητα μεταξύ προγραμμάτων περιήγησης. Το API λειτουργεί καλά χρησιμοποιώντας την πιο πρόσφατη έκδοση των Chrome, Firefox, Safari, Opera, Edge και 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) );
});

Χρήση μεθόδων περικοπής σε JavaScript

Προκειμένου να παρέχεται ευελιξία, το API παρέχει μια δέσμη μεθόδων για την περικοπή εικόνων. Αυτές οι μέθοδοι βοηθούν τον προγραμματιστή να προσθέσει εύκολα χαρακτηριστικά περικοπής εικόνας στην εφαρμογή. Το API παρέχει τη μέθοδο crop() για την περικοπή της εικόνας. Επιπλέον, μπορείτε να χρησιμοποιήσετε το reset(), clear(), replace(), enable(), disable(), death(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() και άλλα.

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