场景实现:后台返回base64的图片流,是一个小程序码,进行渲染在页面,并保存,分享,实现效果见下图
- 首先,对就扣图片流进行处理
- 进行base64转化本地图
- 进项保存
getQrImgBase64: function () {
var that = this;
var url = netWork.config.apiHost + netWork.urlValue.fxBase64;
var param = {
"bizType": 19,
"bizValue": JSON.stringify({
"shareCode": "W43XV5B3"
}),
"page":"pages/personalCenter/personal",
}
wx.showLoading({
title: '加载中..',
})
apiMana.api.postBasic(url, param, res => {
wx.hideLoading();
that.setData({
// scene: res.data,//获取base64二维码
scene: "data:image/png;base64,"+ res.data,
});
// that.getQrCode()
util.dealBase64(res.data).then(res => {
}, res => {
wx.hideLoading();
var mes = "网络错误,请稍后重试~"
if (res != null) {
if (res.message != undefined && res.message != "") {
mes = res.message;
}
}
wx.showToast({
title: mes,
icon: 'none',
duration: 2000
})
})
}, res => {
wx.hideLoading();
var mes = "网络错误,请稍后重试~"
if (res != null) {
if (res.message != undefined && res.message != "") {
mes = res.message;
}
}
wx.showToast({
title: mes,
icon: 'none',
duration: 2000
})
})
},
base64的转化,暂时没用到这块,用的保存那块
/**
* base64图片处理
*/
getQrCode: function() {
var that = this;
/** 获取本地文件管理系统 */
const fsm = wx.getFileSystemManager();
var showImgData = that.data.SunCode;
let src = `data:image/png;base64,${showImgData}`;
showImgData = showImgData.replace(/\ +/g, ""); //去掉空格方法
showImgData = showImgData.replace(/[\r\n]/g, "");
const buffer = wx.base64ToArrayBuffer(showImgData);// 将 base64 字符串转成 ArrayBuffer 对象
const timestamp = Date.parse(new Date());
const fileName = `${wx.env.USER_DATA_PATH}/share_img_${timestamp}.png`;
fsm.writeFileSync(fileName, buffer, 'binary');
console.log("000000",fileName)
that.setData({
sceneFileNam:fileName
})
// console.log("======",that.data.sceneFileNam)
},
上面那段代码是为了这个方法,但是有坑,没实现,本来要做点击图片放大之后长按保存和分享
// 点击图片二维码
previewImg: function(e) {
var that = this;
var scene_img = e.currentTarget.dataset.src; //这里添加图片的地址
**由于这个是base64的没转化,点击之后就不出现图**
// var scene_img = that.data.sceneFileNam; //这里添加图片的地址
that.setData({
scene: scene_img
})
wx.previewImage({
urls: that.data.scene.split(',')
// 需要预览的图片http链接 使用split把字符串转数组。不然会报错
})
},
点击保存
savePhoto: function() {
let that = this
//若二维码未加载完毕,加个动画提高用户体验
wx.showToast({
icon: 'loading',
title: '正在保存图片',
duration: 1000
})
// base64图片编码的图片保存
var save = wx.getFileSystemManager();
var number = Math.random();
save.writeFile({
filePath: `${wx.env.USER_DATA_PATH}/share_img_${number}.png`,
// filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
data: that.data.scene.slice(22),
**//这句如果不加保存之后是识别不到图片格式的,一定要加**
encoding: 'base64',
success: res => {
console.log("669699", res)
wx.saveImageToPhotosAlbum({
filePath: `${wx.env.USER_DATA_PATH}/share_img_${number}.png`,
success: function (res) {
// globalMethod.method.hideLoading(100)
wx.showToast({
title: '保存成功',
icon: "success",
duration: 1000
})
},
fail: function (err) {
// globalMethod.method.hideLoading(100)
wx.showToast({
title: '保存失败',
icon: "success",
duration: 1000
})
console.log(err)
}
})
console.log(res)
},
fail: err => {
console.log(err)
}
})
},