大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说微信小程序 base64格式图片的显示和保存[亲测有效],希望您对编程的造诣更进一步.
当 base64 格式图片数据为： base64Url = ‘data:image/png;base64,’ + base64编码时。（base64 编码中不包括前缀 data:image/png;base64,）
<image src="{{base64Url}}" />
显示不出来
按照上述方法，但是图片显示不出来。。。 可能原因是在小程序中 base64 的数据中包括回车、换行符，无法识别。将回车、换行符全局替换成”(空字符串)即可。
var base64Data = 'base64数据'; // 后台返回的 base64 格式的图片数据
var imgUrl = base64Data.replace(/[\r\n]/g, ''); // 替换回车、换行符
图片保存到相册
注意：imgData 为 不包含
data:image/png;base64,格式的 base64 图片编码。如果包含，需截去该部分。
var imgSrc = this.data.imgData; // base64编码
var save = wx.getFileSystemManager(); // 获取文件管理器对象
var number = Math.random();
save.writeFile({
filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png', // 表示生成一个临时文件名
data: imgSrc,
encoding: 'base64',
success: res => {
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
success: function (res) {
wx.showToast({
title: '保存成功',
})
},
fail: function (err) {
console.log(err)
}
})
console.log(res)
}, fail: err => {
console.log(err)
}
})
小程序也可以使用
wx.previewImage来预览、保存、发送给朋友等操作。但该API 只能用于网络链接
如何保存网络图片
通过 wx.downloadFile 保存临时文件路径的方式实现。
wx.downloadFile({
url: '下载资源的url',
success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res => {
console.log('保存成功', res)
},
fail: error => {
if (error.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||
error.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||
error.errMsg === 'saveImageToPhotosAlbum:fail authorize no response') {
wx.showModal({
content: '需要您授权保存相册',
showCancel: false,
success: () => {
wx.openSetting({
success: (settingdata) => {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showToast({
title: '获取权限成功,再次点击图片即可保存',
icon: 'none',
mask: true
})
} else {
wx.showToast({
title: '获取权限失败，将无法保存到相册哦~',
icon: 'none',
mask: true
})
}
},
fail: (failData) => {
console.log(failData)
}
})
}
})
}
}
})
}
})
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13883.html
