JavaScript API chun Íomhánna a Bharrú
Leabharlann JavaScript Foinse Oscailte a thacaíonn le JavaScript Apps a bhearradh.
Is leabharlann JavaScript foinse oscailte é Cropper a cheadaíonn íomhánna a bhearradh i do bhrabhsálaí. Trí úsáid a bhaint as an API, is féidir leat gnéithe feabhsaithe bearrúcháin a chur le d’fheidhmchlár le 27 modh éagsúil, 39 rogha éagsúil, agus 6 imeacht. Ag baint úsáide as an API is féidir leat do chuid íomhánna a oibriú agus a bhearradh go héasca i do bhrabhsálaí.
Soláthraíonn an leabharlann seo tacaíocht do raon leathan gnéithe barra. Tacaíonn sé le híomhánna a bhearradh trí scáileán tadhaill, súmáil, rothlú, scálú & smeach, ag baint úsáide as il-barróirí, ceadaíonn sé íomhánna a bhearradh ar chanbhás, ceadaíonn sé íomhánna a bhearradh ar chanbhás taobh an bhrabhsálaí le tacaí trasbhrabhsálaí.
Tús a chur le Cropper
An bealach molta chun cropper a shuiteáil trí NPM. Bain úsáid as an ordú seo a leanas chun é a shuiteáil.
Suiteáil cropper trí NPM
npm install cropperjs
Íomhánna Barraí taobh istigh d'Aipeanna JavaScript
Tugann an leabharlann Cropper an cumas do ríomhchláraitheoirí bogearraí a n-íomhánna a bhearradh go cláir ag baint úsáide as JavaScript. D'fhonn íomhá a bhearradh, ní mór duit an íomhá a luchtú agus a chinntiú go n-oireann méid na híomhá go foirfe don choimeádán. Tar éis duit do íomhá a bheith réidh, is féidir leat sraith de ghnéithe bearrtha a dhéanamh ar na comhordanáidí x agus y a thugtar lena n-áirítear rothlú, smeach, scálú, agus socrú airde agus leithead de réir do riachtanas. .
Íomhá Barraí & Sábháil é trí JavaScript API
// 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);
});
Íomhánna Barraí sa Bhrabhsálaí ag baint úsáide as JavaScript
Is féidir leat feidhmiúlacht bearrtha íomhánna a chur i d’aipeanna agus is féidir le húsáideoirí íomhánna a bhearradh go díreach ón mbrabhsálaí. Is féidir le húsáideoirí íomhánna a uaslódáil nó a tharraingt sa bhrabhsálaí agus gnéithe bearrtha a chur i bhfeidhm air. Soláthraíonn an API comhoiriúnacht tras-bhrabhsálaí. Oibríonn an API go breá ag baint úsáide as an leagan is déanaí de Chrome, Firefox, Safari, Opera, Edge, agus Internet Explorer.
Íomhánna Barraí Ar Líne trí 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) );
});
Ag Úsáid Modhanna Bearrtha i JavaScript
D'fhonn solúbthacht a sholáthar, soláthraíonn an API a lán modhanna chun íomhánna a bharr. Cuidíonn na modhanna seo leis an bhforbróir gnéithe bearrtha íomhá a chur leis an bhfeidhmchlár go héasca. Soláthraíonn an API an modh barra() chun an íomhá a bhearradh. Ina theannta sin, is féidir leat athshocrú(), soiléir(), ionad(), cumasaigh(), díchumasaigh(), scrios(), bogadh(), súmáil(), rothlú(), scála(), getData(), setData a úsáid (), getCanvasData() agus tuilleadh.
Súmáil Canbhás go Cóimheas Iomlán trí 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,
});