Crop Image
no description
importimport { CropImage } from "@lib/component/CropImage";
Examples
Ảnh sau khi crop
Modal Crop Image
Crop Image Sử dụng Modal
Preview Image
Ảnh sau khi crop
Preview Image
Có thể xem được hình ảnh trước khi crop
Ảnh sau khi crop
Crop Image
Crop Image Basic
Props
Property
Description
Type
Default
uri
đường dẫn của hình ảnh
string
-
file
dữ liệu hình ảnh dạng File
File
-
cropType
Đặt cho vùng crop có dạng là hình vuông hoặc không
normal | square
normal
previewRef
Tham số để có thể xem preview của hình ảnh trước khi crop
RefObject<HTMLCanvasElement>
-
heightClassName
Tham số quan trọng cần truyền vào để đặt height cho ảnh để crop
string
-
minHeightCrop
Chỉ định chiều cao nhỏ nhất mà vùng crop có thể thu vào theo %
number
15
minWidthCrop
Chỉ định chiều dài nhỏ nhất mà vùng crop có thể thu vào theo %
number
15
containerClassName
className của container component CropImage
string
-
isShowContainer
Tham số truyền vào để tạo ra một vùng bằng với vùng crop dể tránh bị nhảy layout trong trường hợp ảnh chưa load xong
boolean
true
onChangeImageCrop
Function chạy khi có bất kì sự thay đổi nào trong vùng crop
function()
emptyFunction
Handler
Method: rotate: ( parameter1 ) => void
Xoay ảnh
Parameter 1: number
Method: flipHorizontal: ( ) => void
Lật ảnh theo chiều ngang
Method: flipHorizontal: ( ) => void
Lật ảnh theo chiều dọc
Method: scale: ( parameter1 ) => void
Phóng to thu nhỏ ảnh
Parameter 4: number
Method: reset: ( ) => void
Đặt lại trạng thái filp scale rotate của ảnh về ban đầu
Method: crop: ( ) => data
Crop hình ảnh
data: Object
Property
Description
Type
Default
file
Trả về ảnh dạng file
File
-
base64
-Trả về ảnh dạng base64.
- Trong trường hợp xấu nhất là việc crop bị lỗi thì sẽ trả không trả về trường này.
- Khi đó thì uri mặc định của ảnh sẽ được trả về
string
-
uri
-Trả về uri ban đầu của ảnh.
- Trong trường hợp xấu nhất là việc crop bị lỗi thì sẽ trả về lại uri ban đầu của ảnh.
- Nếu crop hoạt động hình thường thì sẽ không trả về trường này
string
-
Method: reInitCropArea: ( ) => void
Đặt lại vùng hiển thị crop ảnh ban đầu
ModalCropImage
Modal custom sẵn dùng cho CropImage
Property
Description
Type
Default
cropImageProps
Có tất cả props của component CropImage trừ url và file
CropImageProps
-
onOK
- Function chạy khi người dùng click vào button OK của Modal.
- Hàm này có 4 parameter crop, load, unload, close.
- crop: Giống với method crop của component CropImage.
- load: Hiển thị loading.
- unload: Tắt Loading.
- close: Đóng Modal
(crop: () => Promise<DataReturnCropImage>, load: () => void, unload: () => void, close: () => void) => void
-
onCancel
Function chạy khi click vào button cancel
() => void
-
textOk
Custom text button Ok
string
Ok
textOkLoad
Custom text button Ok khi loadding
string
Đang cắt ảnh
textCancel
Custom text button cancel
string
Cancel
textReset
Custom text button reset
string
Reset
heading
Text title Modal
string
Chỉnh sửa hình ảnh
buttonOkClassName
className button Ok
string
-
buttonCancelClassName
className button Cancel
string
-
header
Custom Header Modal
ReactNode
-
modalContainerClassName
className Modal container
string
-
closeButton
Custom nút X close Modal
(close: () => void) => ReactNode
-
showControlDefault
Hiển thị hoặc ẩn component ControlDefault
boolean
true
showReset
Hiển thị hoặc ẩn button Reset
boolean
false
Handler
Method: open: ( parameter1 ) => void
Method mở modalCropImage
Parameter 1: Object
Description
Property
Description
Type
Default
image
- Truyền vào dạng object uri là đường dẫn của hình ảnh file là File của hình ảnh.
- uri là bắt buộc, file là options
{ uri: string, file: File }
-
options
Truyền giống với options khi mở Modal
Object
-
Method: close: ( ) => void
Method đóng modal
Method: reset: ( ) => void
Reset các thành phần trong Modal về dạng default
Method: setChange: ( ) => void
Thay đổi trạng thái của nút reset bên trong Modal