JavaScript API pro oříznutí obrázků

Začínáme s Cropperem

Doporučený způsob instalace cropperu přes NPM. K instalaci použijte následující příkaz.

 npm install cropperjs 

Ořízněte obrázky v aplikacích JavaScript

Knihovna Cropper dává softwarovým programátorům možnost programově oříznout své obrázky pomocí JavaScriptu. Chcete-li obrázek oříznout, musíte obrázek načíst a zajistit, aby velikost obrázku dokonale odpovídala kontejneru. Poté, co budete mít obrázek připravený, můžete provést sadu funkcí oříznutí na daných souřadnicích x a y, včetně otáčení, převrácení, změny měřítka a nastavení výšky a šířky podle vašich požadavků. .

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

Ořízněte obrázky v prohlížeči pomocí JavaScriptu

Do svých aplikací můžete přidat funkci oříznutí obrázků a uživatelé mohou obrázky oříznout přímo z prohlížeče. Uživatelé mohou nahrávat nebo přetahovat obrázky do prohlížeče a aplikovat na ně funkce oříznutí. Rozhraní API poskytuje kompatibilitu mezi různými prohlížeči. Rozhraní API funguje dobře s nejnovější verzí prohlížečů Chrome, Firefox, Safari, Opera, Edge a 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) );
});

Použití metod oříznutí v JavaScriptu

Aby byla zajištěna flexibilita, API poskytuje spoustu metod pro oříznutí obrázků. Tyto metody pomáhají vývojářům snadno do aplikace přidat funkce ořezávání obrázků. API poskytuje metodu crop() pro oříznutí obrázku. Dále můžete použít reset(), clear(), nahradit(), povolit (), zakázat (), zničit(), přesunout(), zoom(), otočit(), scale(), getData(), setData (), getCanvasData() a další.

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