一、选取图片并获取临时路径
1、首先需要在小程序中使用API来选取所需保存的图片，并通过success回调函数获取到这些图片的临时文件路径列表。
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths;
// 执行下一步操作
}
})
2、依据具体需求，选择其中一张或多张图片进行操作。举例来说，选择一张图片并将其展示在页面上：
// HTML代码
<image src="{{imgUrl}}"></image>
// JS代码
var tempFilePaths = res.tempFilePaths;
this.setData({
imgUrl: tempFilePaths[0]
});
二、保存图片到相册
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}}"></image>
</view>
Page({
data: {
imgUrl: ''
},
saveImage: function() {
var that = this;
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths;
that.setData({
imgUrl: tempFilePaths[0]
});
wx.saveImageToPhotosAlbum({
filePath: tempFilePaths[0],
success: function(res) {
console.log('保存成功');
},
fail: function(res) {
console.log('保存失败', res);
}
})
}
})
}
})
四、注意事项
1、在进行图片保存操作时，请确认已经向用户申请了相应的授权，否则操作失败；
2、在调用saveImageToPhotosAlbum时，需确保传入的图片路径存在且正确；
3、在进行图片选取操作时，建议按照小程序官方文档要求的姿势实现；
4、在保存图片到相册时，需要暂停所有音视频的播放。
原创文章，作者：CFAO，如若转载，请注明出处：https://www.506064.com/n/138512.html
微信扫一扫 
支付宝扫一扫 