在小程序开发中,实现图片选择与预览功能是常见且实用的需求。通过以下简单的步骤,我们可以轻松完成这一功能,并注意一些关键细节。
1、图片选择功能
首先,我们需要使用小程序的 tt.chooseImage API 来实现图片选择。这个API允许用户从相册或相机中选择图片,并返回选中的图片临时文件路径。
tt.chooseImage({
count: 1, // 最多可以选择的图片张数
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认两者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认两者都有
success: function (res) {
var tempFilePaths = res.tempFilePaths; // 返回选定照片的本地文件路径列表
// 在这里可以进行预览或上传操作
}
})
2、图片预览功能
一旦用户选择了图片,我们可以使用小程序的 tt.previewImage API 来实现图片预览功能。这个API可以预览图片或视频文件,支持手势缩放操作。
tt.previewImage({
current: '', // 当前显示图片的链接,不填则默认为 urls 的第一张
urls: tempFilePaths, // 需要预览的图片链接列表
showmenu: true, // 是否显示长按菜单, 菜单支持保存图片至本地相册
})
注意事项
- 权限获取: 确保在使用 tt.chooseImage 前已经获得了用户的授权,否则可能导致API调用失败。
- 临时文件路径: tt.chooseImage 返回的是临时文件路径,需要及时处理或上传到服务器,否则在用户关闭小程序后路径可能失效。
- 图片大小的限制: 安卓手机选择的图片总体积不能超过180M。
- 图片预览需要携带referer:因为自身项目安全因素,需要在图片预览时携带referer,可以在全局referrerPolicy中的previewImage进行设置。
- 对于有原图上传要求的:安卓手机拍照获取的图片,默认为压缩图,不支持原图。