- 点击图片预览
- 长按图片保存
- 点击按钮保存到手机相册
<!--wxml-->
<text>点击图片预览、长按保存图片、点击按钮保存到系统相册</text>
<image class="img" src="{{item}}" bindtap='previewImage' wx:for="{{src}}" wx:key="{{item.index}}"></image>
<button bindtap='saveImg'>Save</button>
Page({
/**
* 页面的初始数据
*/
data: {
src: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg','http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
]
},
/**
* 长按预览保存图片到本地
*/
previewImage:function(e){
var that = this;
wx.previewImage({
current: that.data.src,//当前显示图片的http链接
urls: that.data.src, //要预览的图片
})
wx.getImageInfo({
src: that.data.src[0],
success(res){
console.log(res)
console.log(res.width)
console.log(res.height)
}
})
},
/**
* saveImg:点击按钮保存图片到本地
*/
saveImg: function() {
var imgSrc = "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"
wx.downloadFile({
url: imgSrc,
success: function(res) {
console.log(res);
//图片保存到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,//图片文件路径
success(res){
//接口调用成功
wx.showToast({
title: '保存成功',
duration:1000,//提示延迟时间
})
},
fail(err){
console.log(err)
//需要用户授权设置
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny"){
console.log('用户一开始拒绝了,我们想再次发起授权')
console.log('打开设置窗口')
// 用户授权设置
wx.openSetting({
success(settingdata){
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
} else {
console.log('获取权限失败,给出不给权限就无法正常使用的提示')
}
}
})
}
}
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
})