JavaScript API لقص الصور

الشروع في استخدام كروبر

الطريقة الموصى بها لتثبيت أداة الحصاد عبر 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

يمكنك إضافة وظيفة اقتصاص الصور في تطبيقاتك ويمكن للمستخدمين قص الصور مباشرة من المتصفح. يمكن للمستخدمين تحميل الصور أو سحبها في المتصفح وتطبيق ميزات الاقتصاص عليها. توفر واجهة برمجة التطبيقات توافقًا عبر المستعرضات. تعمل واجهة برمجة التطبيقات بشكل جيد باستخدام أحدث إصدار من 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) );
});

استخدام طرق القص في جافا سكريبت

لتوفير المرونة ، توفر واجهة برمجة التطبيقات مجموعة من الطرق لاقتصاص الصور. تساعد هذه الطرق المطور على إضافة ميزات اقتصاص الصور إلى التطبيق بسهولة. توفر واجهة برمجة التطبيقات طريقة المحاصيل () لاقتصاص الصورة. علاوة على ذلك ، يمكنك استخدام إعادة تعيين () ، مسح () ، استبدال () ، تمكين () ، تعطيل () ، تدمير () ، نقل () ، تكبير () ، تدوير () ، مقياس () ، 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,
});