छवियों को क्रॉप करने के लिए जावास्क्रिप्ट एपीआई

क्रॉपर के साथ शुरुआत करना

एनपीएम के माध्यम से क्रॉपर स्थापित करने का अनुशंसित तरीका। कृपया इसे स्थापित करने के लिए निम्न आदेश का उपयोग करें।

 npm install cropperjs 

जावास्क्रिप्ट ऐप्स के अंदर छवियों को क्रॉप करें

क्रॉपर लाइब्रेरी सॉफ्टवेयर प्रोग्रामर्स को जावास्क्रिप्ट का उपयोग करके उनकी छवियों को प्रोग्रामेटिक रूप से क्रॉप करने की क्षमता देती है। एक छवि को क्रॉप करने के लिए, आपको छवि को लोड करने और यह सुनिश्चित करने की आवश्यकता है कि छवि का आकार पूरी तरह से कंटेनर में फिट बैठता है। आपकी छवि तैयार होने के बाद, आप दिए गए 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);
});

जावास्क्रिप्ट का उपयोग करके ब्राउज़र में छवियों को क्रॉप करें

आप अपने ऐप्स में इमेज क्रॉपिंग कार्यक्षमता जोड़ सकते हैं और उपयोगकर्ता सीधे ब्राउज़र से छवियों को क्रॉप कर सकते हैं। उपयोगकर्ता ब्राउज़र में छवियों को अपलोड या ड्रैग-ड्रॉप कर सकते हैं और इसमें फसल सुविधाओं को लागू कर सकते हैं। एपीआई क्रॉस-ब्राउज़र संगतता प्रदान करता है। क्रोम, फ़ायरफ़ॉक्स, सफारी, ओपेरा, एज और इंटरनेट एक्सप्लोरर के नवीनतम संस्करण का उपयोग करके एपीआई ठीक काम करता है।

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

जावास्क्रिप्ट में क्रॉपिंग विधियों का उपयोग करना

लचीलापन प्रदान करने के लिए, एपीआई छवियों को क्रॉप करने के तरीकों का एक समूह प्रदान करता है। ये विधियां डेवलपर को छवि क्रॉपिंग सुविधाओं को आसानी से एप्लिकेशन में जोड़ने में मदद करती हैं। एपीआई छवि को क्रॉप करने के लिए क्रॉप () विधि प्रदान करता है। इसके अलावा, आप रीसेट (), क्लियर (), रिप्लेस (), इनेबल (), डिसेबल (), नष्ट (), मूव (), जूम (), रोटेट (), स्केल (), गेटडाटा (), सेटडाटा का उपयोग कर सकते हैं। (), 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,
});