JavaScript API attēlu apgriešanai

Darba sākšana ar Cropper

Ieteicamais veids, kā uzstādīt griezēju, izmantojot NPM. Lūdzu, izmantojiet šo komandu, lai to instalētu.

 npm install cropperjs 

Apgrieziet attēlus JavaScript lietotnēs

Cropper bibliotēka sniedz programmatūras programmētājiem iespēju programmatiski apgriezt attēlus, izmantojot JavaScript. Lai apgrieztu attēlu, tas ir jāielādē un jāpārliecinās, ka attēla izmērs lieliski atbilst konteineram. Kad attēls ir sagatavots, varat veikt apgriešanas funkciju kopu uz dotajām x un y koordinātām, tostarp pagriešanu, apvēršanu, mērogošanu un augstuma un platuma iestatīšanu atbilstoši savām prasībām. .

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

Apgrieziet attēlus pārlūkprogrammā, izmantojot JavaScript

Savās lietotnēs varat pievienot attēlu apgriešanas funkcionalitāti, un lietotāji var apgriezt attēlus tieši no pārlūkprogrammas. Lietotāji var augšupielādēt vai vilkt un nomest attēlus pārlūkprogrammā un lietot tai apgriešanas funkcijas. API nodrošina vairāku pārlūkprogrammu saderību. API darbojas labi, izmantojot jaunāko Chrome, Firefox, Safari, Opera, Edge un Internet Explorer versiju.

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

Apgriešanas metožu izmantošana JavaScript

Lai nodrošinātu elastību, API nodrošina virkni metožu attēlu apgriešanai. Šīs metodes palīdz izstrādātājam viegli pievienot lietojumprogrammai attēlu apgriešanas līdzekļus. API nodrošina metodi crop(), lai apgrieztu attēlu. Turklāt jūs varat izmantot atiestatīt (), notīrīt (), aizstāt (), iespējot (), atspējot (), iznīcināt (), pārvietot (), tuvināt (), pagriezt (), mērogot (), getData (), setData (), getCanvasData() un citi.

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