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

Βιβλιοθήκη JavaScript ανοιχτού κώδικα που υποστηρίζει την περικοπή εφαρμογών JavaScript.

Το Cropper είναι μια βιβλιοθήκη JavaScript ανοιχτού κώδικα που επιτρέπει την περικοπή εικόνων στο πρόγραμμα περιήγησής σας. Χρησιμοποιώντας το API, μπορείτε να προσθέσετε βελτιωμένες δυνατότητες περικοπής στην εφαρμογή σας με 27 διαφορετικές μεθόδους, 39 διαφορετικές επιλογές και 6 συμβάντα. Χρησιμοποιώντας το API, μπορείτε εύκολα να εργαστείτε και να περικόψετε τις εικόνες σας στο πρόγραμμα περιήγησής σας.

Αυτή η βιβλιοθήκη παρέχει υποστήριξη σε ένα ευρύ φάσμα χαρακτηριστικών περικοπής. Υποστηρίζει περικοπή εικόνων μέσω οθόνης αφής, ζουμ, περιστροφή, κλιμάκωση και αναστροφή, με χρήση πολλαπλών περικοπτών, επιτρέπει την περικοπή εικόνων σε καμβά, επιτρέπει την περικοπή εικόνων σε καμβά από την πλευρά του προγράμματος περιήγησης με υποστήριξη πολλαπλών προγραμμάτων περιήγησης.

Previous Next

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

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

Εγκαταστήστε το cropper μέσω NPM

 npm install cropperjs 

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

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

Crop Image & Save It μέσω 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);
});

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

Μπορείτε να προσθέσετε λειτουργία περικοπής εικόνων στις εφαρμογές σας και οι χρήστες μπορούν να περικόψουν εικόνες απευθείας από το πρόγραμμα περιήγησης. Οι χρήστες μπορούν να ανεβάσουν ή να αποθέσουν εικόνες στο πρόγραμμα περιήγησης και να εφαρμόσουν λειτουργίες περικοπής σε αυτό. Το API παρέχει συμβατότητα μεταξύ προγραμμάτων περιήγησης. Το API λειτουργεί καλά χρησιμοποιώντας την πιο πρόσφατη έκδοση των Chrome, Firefox, Safari, Opera, Edge και Internet Explorer.

Φωτογραφίες online μέσω 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) );
});

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

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

Zoom Canvas: Απόλυτο Ratio μέσω 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,
});
 Ελληνικά