Share Sử dụng thư viện Cropper.js để cắt xén hình ảnh

filiallion · 05/27/2019

Đối với các website có sử dụng hình ảnh như website bán hàng thể hiện hình ảnh sản phẩm thì thường các bạn sẽ thiết kế hình ảnh bằng Photoshop chẳng hạn để điều chỉnh kích thước hình ảnh đúng theo khuông mẫu của giao diện web. Tuy nhiên, trong nhiều trường hợp, website của các bạn lại cung cấp cho người dùng chức năng đăng hình ảnh, ví dụ như các website rao vặt hay các bạn muốn cho người sử dụng website đăng sản phẩm một cách nhanh chóng bằng cách chỉnh sửa, cắt xén hình ảnh ngay trên website thì lúc này các bạn sẽ cần phải tích hợp công cụ cắt xén hình ảnh vào website của mình. Để đáp ứng yêu cầu cắt xén hình ảnh ngay trên website, các bạn có thể sử dụng thư viện Cropper.js để tự tạo tính năng cắt xén hình ảnh.

Thư viện Cropper.js được phát triển rất chuyên nghiệp, đáp ứng nhu cầu cắt xén hình ảnh trực quan bằng cách kéo chọn vùng cắt xén. Khi nói đến việc cắt xén hình ảnh, các bạn có thể nghĩ việc cài đặt, cấu hình thư viện sẽ phức tạp nhưng ngược lại, việc sử dụng thư viện Cropper.js lại vô cùng đơn giản chỉ với vài dòng mã lệnh.

Trước tiên, các bạn tải về thư viện Cropper.js tại địa chỉ https://github.com/fengyuanchen/cropperjs và tích hợp vào website với nội dung mã lệnh HTML như sau:

HTML:

<link href="path/to/cropper.min.css" rel="stylesheet">
<script src="path/to/cropper.min.js"></script>

Bây giờ, các bạn cài đặt thư viện Cropper.js như sau:

JavaScript:

//Khởi tạo đối tượng cropper
var cropper = new Cropper(document.getElementById('image'), {
    aspectRatio: 16 / 9
});

//Scale hình ảnh
cropper.scale(-1);

Các bạn tạo thêm thành phần HTML như sau:

HTML:

<img src="path/to/image.jpg" id="image">

Trên đây chỉ là một ví dụ rất đơn giản, thư viện Cropper.js còn có thể làm được nhiều hơn thế với rất nhiều tuỳ chỉnh, các bạn có thể tìm hiểu thêm về thư viện Cropper.js tại địa chỉ https://fengyuanchen.github.io/cropperjs.

Share Sử dụng thư viện Cropper.js để cắt xén hình ảnh

filiallion

Administrator