一、选取图片并获取临时路径
1、首先需要在小程序中使用
wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths; // 执行下一步操作 } })
2、依据具体需求,选择其中一张或多张图片进行操作。举例来说,选择一张图片并将其展示在页面上:
// HTML代码 <image src="{{imgUrl}}">二、保存图片到相册
1、使用
API可以将图片保存到手机相册中。调用该API时需要传入图片的临时路径,在success回调函数中可以做相应操作。 wx.saveImageToPhotosAlbum({ filePath: tempFilePaths[0], success: function(res) { console.log('保存成功'); }, fail: function(res) { console.log('保存失败', res); } })2、在新版本的微信开发工具中,调用该API需要在app.json文件中"setting"字段中添加相关权限设置:
"mp-weixin": { "appid": "wx1111111111111", "setting": { "urlCheck": true, "es6": false, "enhance": false, "postcss": false, "preloadBackgroundData": false, "functionalPages": false, "minified": false, "requestDomain": [], "wsRequestDomain": [], "uploadDomain": [], "downloadDomain": [], "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位功能" } }, "sitemapLocation": "sitemap.json" } }三、完整示例代码
综合以上两部分,下面给出一个完整的示例代码:
<view class="container"> <view class="btn" bindtap="saveImage">保存图片</view> <image src="{{imgUrl}}">四、注意事项
1、在进行图片保存操作时,请确认已经向用户申请了相应的授权,否则操作失败;
2、在调用saveImageToPhotosAlbum时,需确保传入的图片路径存在且正确;
3、在进行图片选取操作时,建议按照小程序官方文档要求的姿势实现;
4、在保存图片到相册时,需要暂停所有音视频的播放。