Nhảy tới nội dung

image-cropper

Image Cropper là component cho phép crop ảnh theo tỉ lệ mong muốn.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
srcstringĐường dẫn cục bộ tới hình ảnh muốn crop
aspectRatiostring1:1Tỷ lệ crop ảnh mong muốn, format {w}:{h}. Ví dụ 1:1, 4:3
classNamestringThêm class cho component
idstringid của component. Dùng jsapi createCropperContext(id) để reference tới cropper
onSaveevent(e:Object) => voidCallback khi việc crop hình hoàn thành.

Sample Code

Lưu ý

JavaScript code dưới đây được sử dụng cho tất cả các component demo, không phải là best practice.

Sử dụng image cropper ở txml

<image-cropper id="cropper-1" class="cropper" src={{imagePath}} aspectRatio={{ratio}} onSave="onCropperFinish" />

Thực hiện việc crop hình

const cropper = my.createCropperContext('cropper-1');
cropper.save();

Callback cho việc crop thành công.

onCropperFinish(e) {
my.previewImage({
urls: [e.uri],
enablesavephoto: false,
enableShowPhotoDownload: false,
success: (res) => {
console.log('success', res);
},
fail: (err) => {
console.log('fail', err);
},
});
},
}

Sample hoàn chỉnh

Page({
data: {
imagePath: undefined,
ratio: '1:1'
},
onLoad() {
my.chooseImage({
count: 1,
success: (res) => {
this.setData({
imagePath: res.filePaths[0]
});
},
fail: (e) => {
console.log(e);
}
});
},
onChangeRatio(e) {
const ratio = e.target.dataset.ratio;
this.setData({
ratio
});
},
onSave(e) {
const cropper = my.createCropperContext('cropper-1');
cropper.save();
},

onCropperFinish(e) {
my.previewImage({
urls: [e.uri],
enablesavephoto: false,
enableShowPhotoDownload: false,
success: (res) => {
console.log('success', res);
},
fail: (err) => {
console.log('fail', err);
}
});
},
onChangePhoto() {
my.chooseImage({
count: 1,
success: (res) => {
this.setData({
imagePath: res.filePaths[0]
});
},
fail: (e) => {
console.log(e);
}
});
}
});
  <view class="page-container">
<image-cropper id="cropper-1" class="cropper" src={{imagePath}} aspectRatio={{ratio}} onSave="onCropperFinish" />
<view class="cropper-footer">
<view class="cropper-footer-ratio">
<image class="ratio-icon" mode="center" src="/images/ratio_34.png" onTap="onChangeRatio" data-ratio="3:4"></image>
<image class="ratio-icon" mode="center" src="/images/ratio_11.png" onTap="onChangeRatio" data-ratio="1:1"></image>
<image class="ratio-icon" mode="center" src="/images/ratio_43.png" onTap="onChangeRatio" data-ratio="4:3"></image>
</view>
<tu-button class="save-button" shape="pill" type="solid" onTap="onChangePhoto">Album</tu-button>
<tu-button class="save-button" shape="pill" type="solid" onTap="onSave">Save</tu-button>
</view>
</view>

Kết quả

modal