页面显示:
显示情况1(后端处理好的):如果页面显示时,后端已经生成图片base64文件流格式,则直接赋值给image的src属性做绑定,就能进行对应的展示。
显示情况2(后端未处理的):如果页面显示时,后端生成的图片不是base64文件流格式,则需要手动(后端如果返回的时文件访问路径,那么需要在返回的文件路径最前面拼接(“data:image/png;base64,”)进行转化后赋值给image的src属性做绑定,就能进行对应的展示。
页面下载:
下载情况1(后端处理好的):如果页面下载时,后端已经生成图片base64文件流格式,下载时则需要手动去掉后端添加好的(“data:image/png;base64,”),下载的图片才能是有效的图片。
下载情况2(后端未处理的):如果页面下载时,后端生成的图片不是base64文件流格式,则直接接调用下载图片的api方法就能正常下载,并且下载下来的图片是有效图片。
例如:
<!-- 显示小程序的二维码 -->
<view class="bar_code_box"
><image class="bar_code_img" :src="QRCodeUrl" mode=""></image
></view>
<view class="greetings_box"
>-{{ isLive ? '精彩活动' : '优质成果' }},邀你共赏-</view
>
js代码:
data() {
return {
isLive: true, // 默认显示的是活动的分享页面
QRCodeUrl: '', // 二维码img的url
timer: true, // 存一个定时器状态开关
}
},
methods: {
// 防抖处理 将base64编码保存到本地临时文件并获取地址
debounce() {
let that = this
if (that.timer) {
that.timer = false
// that.onDown(that.QRCodeUrl)
that.getPath(that.QRCodeUrl)
setTimeout(() => {
console.log('你要变成🐒🐒🐒🐒防抖函数')
that.timer = true
}, 3000)
} else {
uni.showToast({
title: '稍等,请勿重复操作',
icon: 'none',
duration: 5000,
})
}
},
/**将base64编码保存到本地临时文件并获取地址 */
getPath(base64) {
let that = this
/*code是指图片base64格式数据*/
//声明文件系统
//随机定义路径名称
const times = new Date().getTime() // 时间戳
const fileImgPath = wx.env.USER_DATA_PATH + '/' + times + '.png'
//将base64图片写入
uni.getFileSystemManager().writeFile({
filePath: fileImgPath,
data: base64.replace('data:image/png;base64,', ''),
encoding: 'base64',
success: (res) => {
//写入成功了的话,新的图片路径就能用了
//使用 uni.saveImageToPhotosAlbum() 方法保存
uni.saveImageToPhotosAlbum({
filePath: fileImgPath,
success: function (res2) {
uni.showToast({
title: '保存成功,可以从相册选择再分享',
icon: 'none',
duration: 5000,
})
},
fail: function (err) {
uni.showToast({
title: '保存失败,您是否授权相册权限',
icon: 'none',
duration: 5000,
})
},
})
},
})
},
}
是scss编译器的css样式:
.bar_code_box {
width: 560rpx;
height: 180rpx;
display: flex;
justify-content: center;
.bar_code_img {
width: 180rpx;
height: 180rpx;
}
}