JavaScript API om afbeeldingen bij te snijden
Open Source JavaScript-bibliotheek die het bijsnijden van JavaScript-apps ondersteunt.
Cropper is een open source JavaScript-bibliotheek waarmee u afbeeldingen in uw browser kunt bijsnijden. Met behulp van de API kunt u verbeterde bijsnijdfuncties aan uw toepassing toevoegen met 27 verschillende methoden, 39 verschillende opties en 6 gebeurtenissen. Met behulp van de API kunt u eenvoudig uw afbeeldingen bewerken en bijsnijden in uw browser.
Deze bibliotheek biedt ondersteuning voor een breed scala aan bijsnijdfuncties. Het ondersteunt het bijsnijden van afbeeldingen via het aanraakscherm, zoomen, roteren, schalen en spiegelen, het gebruik van meerdere croppers, het bijsnijden van afbeeldingen op canvas, het bijsnijden van afbeeldingen op het canvas aan de browserzijde met ondersteuning voor meerdere browsers.
Aan de slag met Cropper
De aanbevolen manier om cropper te installeren via NPM. Gebruik de volgende opdracht om het te installeren.
Installeer cropper via NPM
npm install cropperjs
Afbeeldingen bijsnijden in JavaScript-apps
De Cropper-bibliotheek geeft softwareprogrammeurs de mogelijkheid om hun afbeeldingen programmatisch bij te snijden met behulp van JavaScript. Om een afbeelding bij te snijden, moet u de afbeelding laden en ervoor zorgen dat de grootte van de afbeelding perfect in de container past. Nadat u uw afbeelding gereed hebt, kunt u een reeks bijsnijdfuncties uitvoeren op de gegeven x- en y-coördinaten, inclusief roteren, spiegelen, schalen en hoogte en breedte instellen volgens uw vereisten. .
Quality over Quantity (QoQ) Releases Vertaling:
// 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);
});
Afbeeldingen bijsnijden in browser met JavaScript
U kunt functionaliteit voor het bijsnijden van afbeeldingen toevoegen aan uw apps en gebruikers kunnen afbeeldingen rechtstreeks vanuit de browser bijsnijden. Gebruikers kunnen afbeeldingen uploaden of neerzetten in de browser en er bijsnijdfuncties op toepassen. De API biedt compatibiliteit tussen browsers. De API werkt prima met de nieuwste versie van Chrome, Firefox, Safari, Opera, Edge en Internet Explorer.
Crop Image Online via JavaScript
//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) );
});
Bijsnijdmethoden gebruiken in JavaScript
Om flexibiliteit te bieden, biedt de API een aantal methoden om afbeeldingen bij te snijden. Deze methoden helpen de ontwikkelaar om eenvoudig functies voor het bijsnijden van afbeeldingen aan de toepassing toe te voegen. De API biedt de methode crop() om de afbeelding bij te snijden. Verder kunt u reset(), clear(), Replace(), enable(), disable(), destroy(), move(), zoom(), roteren(), scale(), getData(), setData gebruiken (), getCanvasData() en meer.
Zoom Canvas naar Absolute Ratio via JavaScript
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,
});