API JavaScript để cắt hình ảnh
Thư viện JavaScript nguồn mở hỗ trợ các ứng dụng JavaScript cắt xén.
Cropper là một thư viện JavaScript mã nguồn mở cho phép cắt hình ảnh trong trình duyệt của bạn. Sử dụng API, bạn có thể thêm các tính năng cắt xén nâng cao vào ứng dụng của mình với 27 phương pháp khác nhau, 39 tùy chọn khác nhau và 6 sự kiện. Sử dụng API, bạn có thể dễ dàng làm việc và cắt hình ảnh của mình trong trình duyệt.
Thư viện này cung cấp hỗ trợ cho một loạt các tính năng cắt xén. Nó hỗ trợ cắt ảnh thông qua màn hình cảm ứng, phóng to, xoay, chia tỷ lệ và lật, sử dụng nhiều bộ cắt, cho phép cắt ảnh trên canvas, cho phép cắt ảnh trên canvas phía trình duyệt với hỗ trợ nhiều trình duyệt.
Bắt đầu với Cropper
Cách được khuyến nghị để cài đặt cropper qua NPM. Vui lòng sử dụng lệnh sau để cài đặt nó.
Cài đặt cropper qua NPM
npm install cropperjs
Cắt hình ảnh bên trong ứng dụng JavaScript
Thư viện Cropper cung cấp cho các nhà lập trình phần mềm khả năng cắt hình ảnh của họ theo cách lập trình bằng JavaScript. Để cắt hình ảnh, bạn cần tải hình ảnh và đảm bảo rằng kích thước của hình ảnh hoàn toàn phù hợp với vùng chứa. Sau khi đã chuẩn bị xong hình ảnh, bạn có thể thực hiện một tập hợp các tính năng cắt xén trên các tọa độ x và y nhất định bao gồm xoay, lật, chia tỷ lệ và thiết lập chiều cao và chiều rộng theo yêu cầu của bạn. .
Crop Image and save it through 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);
});
Cắt hình ảnh trong trình duyệt bằng JavaScript
Bạn có thể thêm chức năng cắt ảnh trong ứng dụng của mình và người dùng có thể cắt ảnh trực tiếp từ trình duyệt. Người dùng có thể tải lên hoặc kéo thả hình ảnh trong trình duyệt và áp dụng các tính năng cắt xén cho nó. API cung cấp khả năng tương thích trên nhiều trình duyệt. API hoạt động tốt khi sử dụng phiên bản mới nhất của Chrome, Firefox, Safari, Opera, Edge và Internet Explorer.
Cắt ảnh trực tuyến qua 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) );
});
Sử dụng phương pháp cắt xén trong JavaScript
Để cung cấp tính linh hoạt, API cung cấp một loạt các phương pháp để cắt hình ảnh. Các phương pháp này giúp nhà phát triển thêm tính năng cắt ảnh vào ứng dụng một cách dễ dàng. API cung cấp phương thức crop () để cắt hình ảnh. Hơn nữa, bạn có thể sử dụng reset (), clear (), Replace (), enable (), vô hiệu hóa (), tiêu diệt (), di chuyển (), thu phóng (), xoay (), scale (), getData (), setData (), getCanvasData () và hơn thế nữa.
Phóng to Canvas đến Absolute Tỉ lệ 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,
});