my.chooseImage
说明:mPaaS 10.1.32 及以上版本支持该接口。
拍照或从手机相册中选择图片。
注意:图片的路径数组在 IDE 上以 .png
为后缀,在真机预览上以 .image
为后缀,请以真机效果为准。
入参
名称 |
类型 |
必填 |
描述 |
count |
Number |
否 |
最大可选照片数,默认为 1 张 |
sizeType |
StringArray |
否 |
original 原图,compressed 压缩图,默认二者都有 |
sourceType |
StringArray |
否 |
相册选取或者拍照,默认为 [‘camera’,‘album’] |
success |
Function |
否 |
调用成功的回调函数 |
fail |
Function |
否 |
调用失败的回调函数 |
complete |
Function |
否 |
调用结束的回调函数(调用成功、失败都会执行) |
success 返回值
名称 |
类型 |
描述 |
apFilePaths |
StringArray |
图片的路径数组 |
错误码
error |
描述 |
解决方案 |
11 |
用户取消操作 |
这是用户正常交互流程分支,不需要特殊处理 |
代码示例
// API-DEMO page/API/image/image.json
{
"defaultTitle": "图片"
}
<!-- API-DEMO page/API/image/image.axml -->
<view class="page">
<view class="page-section">
<view class="page-section-btns">
<view onTap="chooseImage">选择照片</view>
<view onTap="previewImage">预览照片</view>
<view onTap="saveImage">保存照片</view>
</view>
</view>
</view>
// API-DEMO page/API/image/image.js
Page({
chooseImage() {
my.chooseImage({
sourceType: ['camera','album'],
count: 2,
success: (res) => {
my.alert({
content: JSON.stringify(res),
});
},
fail:()=>{
my.showToast({
content: 'fail', // 文字内容
});
}
})
},
previewImage() {
my.previewImage({
current: 2,
urls: [
'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
],
});
},
saveImage() {
my.saveImage({
url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
showActionSheet: true,
success: () => {
my.alert({
title: '保存成功',
});
},
});
}
});
my.previewImage
说明:mPaaS 10.1.32 及以上版本支持该接口。
此接口用于预览图片。暂不支持浏览本地图片。
基础库版本 1.0.0 在 iOS 上不支持 my.previewImage
和 my.chooseImage
的组合使用。
入参
名称 |
类型 |
必填 |
描述 |
urls |
Array |
是 |
要预览的图片链接列表,支持网络 URL、apfilePath |
current |
Number |
否 |
当前显示图片索引,默认为 0,即 urls 中的第一张图片 |
success |
Function |
否 |
调用成功的回调函数 |
fail |
Function |
否 |
调用失败的回调函数 |
complete |
Function |
否 |
调用结束的回调函数(调用成功、失败都会执行) |
enablesavephoto |
Boolean |
否 |
照片支持长按下载。(基础库 1.13.0 开始支持) |
enableShowPhotoDownload |
Boolean |
否 |
是否在右下角显示下载入口,需要配合 enablesavephoto 参数使用。(基础库 1.13.0 开始支持) |
代码示例
// API-DEMO page/API/image/image.json
{
"defaultTitle": "图片"
}
<!-- API-DEMO page/API/image/image.axml -->
<view class="page">
<view class="page-section">
<view class="page-section-btns">
<view onTap="chooseImage">选择照片</view>
<view onTap="previewImage">预览照片</view>
<view onTap="saveImage">保存照片</view>
</view>
</view>
</view>
// API-DEMO page/API/image/image.js
Page({
chooseImage() {
my.chooseImage({
sourceType: ['camera','album'],
count: 2,
success: (res) => {
my.alert({
content: JSON.stringify(res),
});
},
fail:()=>{
my.showToast({
content: 'fail', // 文字内容
});
}
})
},
previewImage() {
my.previewImage({
current: 2,
urls: [
'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
],
});
},
saveImage() {
my.saveImage({
url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
showActionSheet: true,
success: () => {
my.alert({
title: '保存成功',
});
},
});
}
});
my.saveImage
说明:mPaaS 10.1.32 及以上版本支持该接口。
此接口用于将在线图片保存至手机相册。
入参
名称 |
类型 |
必填 |
描述 |
url |
String |
是 |
要保存的图片链接 |
showActionSheet |
Boolean |
否 |
是否显示图片操作菜单,默认为 true。(基础库 1.24.0 开始支持) |
success |
Function |
否 |
调用成功的回调函数 |
fail |
Function |
否 |
调用失败的回调函数 |
complete |
Function |
否 |
调用结束的回调函数(调用成功、失败都会执行) |
错误码
error |
描述 |
解决方案 |
2 |
参数无效,没有传 URL 参数 |
重新传入正确的 URL 参数。 |
15 |
没有开启相册权限(iOS only) |
开启相册权限。 |
16 |
手机相册存储空间不足(iOS only) |
释放手机存储空间。 |
17 |
保存图片过程中的其他错误 |
稍后重试。 |
常见问题 FAQ
- Q:
my.saveImage
接口能否保存 Base64 的图片?
A:目前 my.saveImage
暂不支持保存 Base64 的图片。
代码示例
// API-DEMO page/API/image/image.json
{
"defaultTitle": "图片"
}
<!-- API-DEMO page/API/image/image.axml -->
<view class="page">
<view class="page-section">
<view class="page-section-btns">
<view onTap="chooseImage">选择照片</view>
<view onTap="previewImage">预览照片</view>
<view onTap="saveImage">保存照片</view>
</view>
</view>
</view>
// API-DEMO page/API/image/image.js
Page({
chooseImage() {
my.chooseImage({
sourceType: ['camera','album'],
count: 2,
success: (res) => {
my.alert({
content: JSON.stringify(res),
});
},
fail:()=>{
my.showToast({
content: 'fail', // 文字内容
});
}
})
},
previewImage() {
my.previewImage({
current: 2,
urls: [
'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
],
});
},
saveImage() {
my.saveImage({
url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
showActionSheet: true,
success: () => {
my.alert({
title: '保存成功',
});
},
});
}
});
my.compressImage
说明:基础库 1.4.0 及以上版本支持该接口,低版本需做兼容处理,操作参见
小程序基础库说明,mPaaS 10.1.60 及以上版本支持该接口。
此接口用于压缩图片。
入参
名称 |
类型 |
必填 |
描述 |
apFilePaths |
StringArray |
是 |
要压缩的图片地址数组 |
compressLevel |
Number |
否 |
压缩级别,支持 0 ~ 4 的整数,默认为 4。详见 compressLevel 表 |
success |
Function |
否 |
调用成功的回调函数 |
fail |
Function |
否 |
调用失败的回调函数 |
complete |
Function |
否 |
调用结束的回调函数(调用成功、失败都会执行) |
success 返回值
名称 |
类型 |
描述 |
apFilePaths |
StringArray |
压缩后的路径数组 |
compressLevel 表
compressLevel |
说明 |
0 |
低质量 |
1 |
中等质量 |
2 |
高质量 |
3 |
不压缩 |
4 |
根据网络适应 |
代码示例
<!-- API-DEMO page/API/compress-image/compress-image.axml-->
<view class="page">
<view class="page-description">压缩图片 API</view>
<view class="page-section">
<view class="page-section-title">my.compressImage</view>
<view class="page-section-demo">
<button type="primary" onTap="selectImage" hover-class="defaultTap">选择图片</button>
<image
src="{{compressedSrc}}"
mode="{{mode}}" />
</view>
</view>
</view>
// API-DEMO page/API/compress-image/compress-image.js
Page({
data: {
compressedSrc: '',
mode: 'aspectFit',
},
selectImage() {
my.chooseImage({
count: 1,
success: (res) => {
my.compressImage({
apFilePaths: res.apFilePaths,
level: 1,
success: data => {
console.log(data);
this.setData({
compressedSrc: data.apFilePaths[0],
})
}
})
}
})
},
});
my.getImageInfo
说明:基础库 1.4.0 及以上版本支持本接口,低版本需做兼容处理,操作参见
小程序基础库说明,mPaaS 10.1.32 及以上版本支持该接口。
此接口用于获取图片信息。
入参
名称 |
类型 |
必填 |
描述 |
src |
String |
否 |
图片路径,目前支持: |
success |
Function |
否 |
调用成功的回调函数 |
fail |
Function |
否 |
调用失败的回调函数 |
complete |
Function |
否 |
调用结束的回调函数(调用成功、失败都会执行) |
success 返回值
名称 |
类型 |
描述 |
width |
Number |
图片宽度(单位为 px) |
height |
Number |
图片高度(单位为 px) |
path |
String |
图片本地路径 |
orientation |
String |
返回图片的方向,有效值见下表 |
type |
String |
返回图片的格式 |
orientation 参数说明
枚举值 |
说明 |
up |
默认值 |
down |
180 度旋转 |
left |
逆时针旋转 90 度 |
right |
顺时针旋转 90 度 |
up-mirrored |
同 up ,但水平翻转 |
down-mirrored |
同 down ,但水平翻转 |
left-mirrored |
同 left ,但垂直翻转 |
right-mirrored |
同 right ,但垂直翻转 |
代码示例
//网络图片路径
my.getImageInfo({
src:'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
success:(res)=>{
console.log(JSON.stringify(res))
}
})
//apFilePath
my.chooseImage({
success: (res) => {
my.getImageInfo({
src:res.apFilePaths[0],
success:(res)=>{
console.log(JSON.stringify(res))
}
})
},
})
//相对路径
my.getImageInfo({
src:'image/api.png',
success:(res)=>{
console.log(JSON.stringify(res))
}
})
在文档使用中是否遇到以下问题
更多建议
匿名提交