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