ReactJS - Crop ảnh với thư việt React Cropper

Chào các bạn, trong bài viết này mình sẽ giới thiệu thư viện React Cropper - một thư viện dùng để cắt ảnh trong ReactJS. Xem thử Demo

Giới thiệu

React Cropper là thư viện được viết bởi Fong Kuanghuei. Thống kê tại thời điểm mình viết bài, số lượng downloads last day là 2114, downloads last week là 9092 lượt và 35255 lượt downloads last month, như vậy có thể thấy thư viện này được khá nhiều người sử dụng. (Theo mình kiểm tra một số thư viện crop anh khác thì React Cropper là thư viện có số người dùng nhiều nhất).

Cài đặt

Cài đặt bằng cú pháp sau:

npm install --save react-cropper

Cách dùng

Dưới đây là đoạn code mẫu cách dùng

import React, {Component} from 'react';
import Cropper from 'react-cropper'; //Import Cropper Component
import 'cropperjs/dist/cropper.css';  //Import file style
 
class Demo extends Component {
  _crop(){
    // image in dataUrl
    console.log(this.cropper.getCroppedCanvas().toDataURL());
  }
 
  render() {
    return (
      <Cropper
        ref={cropper => { this.cropper = cropper; }}
        src="http://fengyuanchen.github.io/cropper/img/picture.jpg"
        style={{height: 400, width: '100%'}}
        // Cropper.js options
        aspectRatio={16 / 9}
        guides={false}
        crop={this._crop.bind(this)} />
    );
  }
}

Thiết lập cơ bản

Một số thiết lập cơ bản:

src: //Link ảnh crop (default null)
style: //Internal style
aspectRatio: //Tỉ lệ width/height
dragMode: //thiết lập cho drag crop section (default crop)
guides: //Hiện thị những dòng kẻ chấm dưới box crop (default true)
zoomable: //thiết lập zoom ảnh (default true)
scaleble: //Thiết lập scale ảnh (default true)
movable: //Thiết lập move ảnh (default true)
...

Xem chi tiết tất cả các options tại đây Docs

Kết luận

Rất dễ phải không nào, nếu dự án của bạn cần tính năng crop image, hãy thử package này nhé.