Nhảy tới nội dung

my.cropImage

cropImage

Cập nhật lần cuối vào
  • my.cropImage là API dùng để crop hình ảnh.

Khả dụng: Hỗ trợ từ version 1.82.35 trở lê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

API Params

Thuộc tínhKiểu dữ liệuBắt buộcMô tả
filePathstringĐường dẫn tới hình ảnh cần crop. Chỉ support đường dẫn cục bộ.
widthnumberChiều rộng mong muốn của hình ảnh sau khi crop
heightnumberChiều dài mong muốn của hình ảnh sau khi crop
circlebooleanBật/tắt chế độ crop ảnh thành hình tròn
successFunctionCallback function khi việc crop hình ảnh thành công.
failFunctionCallback function khi việc crop hình ảnh bất thành.
completeFunctionCallback function khi gọi API hoàn tất bất kể việc crop hình ảnh thành công hay thất bại.

Sample Code

index.txml
<view>
<block-header title="Usage" description="Compress image" />
<view class="block-content">
<image class="image-cover" src="{{tempFilePath}}" />
<button class="button-full" onTap="onChooseImage">Choose Image</button>
</view>
<view class="block-content">
<button class="button-full" disabled="{{tempFilePath === undefined}}" onTap="onCropImage">Crop
Image</button>
</view>
</view>
index.js
Page({
data: {
tempFilePath: undefined,
cropFilePath: undefined
},
onChooseImage() {
my.chooseImage({
count: 1,
success: (res) => {
console.log(res);
this.setData({
tempFilePath: res.filePaths[0]
});
},
fail: (e) => {
console.log(e);
}
});
},

onCropImage() {
my.cropImage({
filePath: this.data.tempFilePath,
circle: true,
width: 400,
height: 400,
success: (res) => {
my.previewImage({
urls: [res.path],
enablesavephoto: false,
enableShowPhotoDownload: false,
success: (res) => {
console.log('success', res);
},
fail: (err) => {
console.log('fail', err);
}
});
},
fail: (e) => {
console.log(e);
}
});
}
});