分享到朋友圈，画布中的二维码不显示是什么原因，后台给返回的图片的路径是base64，代码如下：
//base64转本地
const fsm = wx.getFileSystemManager();
constFILE_BASE_NAME = ‘tmp_base64src’; //自定义文件名
function base64src(base64data, cb) {
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
if (!format) {
return (newError’ERROR_BASE64SRC_PARSE’));
}
const filePath = ${wx.env.USER_DATA_PATH${FILE_BASE_NAME${format}
const buffer = wx.base64ToArrayBuffer(bodyData);
fsm.writeFile({
filePath,
data: buffer,
encoding: ‘binary’
success() {
cb(filePath);
},
fail() {
return (newError’ERROR_BASE64SRC_WRITE’));
},
});
};
//base64转本地
shareP:function(){
var that = this
that.setData({
shareHide: false
popup:true
})
wx.request({
url: urls.urls() + ‘front/wx/queryAccessToken.html’
method: ‘GET’
data: {
“aid”‘wx531e717ad0dbeb56’
“ast”‘cfdc8121dfc43338eddb465a86ab066f’
},
success: function (res) {
var accessToken = res.data.data.accessToken
console.log(that.data.refId)
wx.request({
url: urls.urls() + ‘front/wx/minProCreateQr.html’
method: ‘POST’
header: {
// “conter-type”: “application.json”, //get
“Content-Type”: “application/x-www-form-urlencoded”//post
},
// responseType: ‘arraybuffer’,//这个是转化成base64需要加的
data: {
id: that.data.refId,
path: ‘pages/bargainDetail/bargainDetail?refid=’ + that.data.refId + ‘&attendMemberId=’ + that.data.attendMemberId,
width: ‘280’
// is_hyaline: true,
access_token: accessToken,
// autoColor: false,
// lineColor: { “r”: 0, “g”: 0, “b”: 0 },
// qrType: “bargain”
},
success: function (res) {
console.log(that.data.refId)
console.log(res.data.data.qr.qrPath)
var qrPath = res.data.data.qr.qrPath
that.setData({
imgUrlur: qrPath.replace(/\r\n/g,""),
imgUrl1: qrPath
})
// 二维码
loginUtils.base64srcs(that.data.imgUrl1, res => {
// 返回图片地址，直接赋值到image标签即可
that.setData({
imgUrl1: res
})
console.log(res)
});
},
fail: function (res) {
console.log(res.data)
}
})
},
fail: function (res) {
console.log(res.data)
}
})
},
saveImg:function(){
var that = this
that.shareImg()
},
shareImg: function (){
var that = this
console.log(that.data.bargainDetail.goodsAlbumPath)
console.log(that.data.imgUrl1)
wx.downloadFile({
url: that.data.bargainDetail.goodsAlbumPath,
success: function (res2) {
//缓存二维码
that.setData({
qrcode_temp: res2.tempFilePath
})
console.log(res2.tempFilePath)
wx.downloadFile({
url:that.data.imgUrl1,
success:function(res){
that.setData({
qrPathUrl: res.tempFilePath
})
that.drawImage();
wx.hideLoading();
setTimeout(function () {
that.canvasToImage()
}, 2000
}
})
},
fail: function (res) {
console.log(res)
}
})
},
drawImage() {
var that = this
console.log(that.data.imgUrl1)
const ctx = wx.createCanvasContext(‘myCanvas’
var bgPath = ‘…/…/images/shareBg.png’
var hostNickname = that.data.memberName1;
var portraitPath = that.data.photoImg1;
var qrPathUrl = that.data.qrPathUrl;
console.log(qrPathUrl)
var windowWidth = that.data.windowWidth;
var windowHeight = that.data.windowHeight;
console.log(qrPathUrl)
//绘制背景图片
ctx.drawImage(bgPath, , , windowWidth, windowHeight)
//绘制第一段文本
// ctx.setFillStyle(’#ffffff’)
ctx.setFontSize(0.04 * windowWidth)
ctx.setTextAlign(‘center’
ctx.fillText( ‘您的好友邀请您一起参加塞上房砍价活动’, windowWidth / , 0.25 * windowWidth)
//绘制第二段文本
// ctx.setFillStyle(’#ffffff’)
ctx.setFontSize(0.04 * windowWidth)
ctx.setTextAlign(‘center’
ctx.fillText(‘立即打开看看吧’, windowWidth / , 0.30 * windowWidth)
//绘制商品图片
var qrcode_temp = that.data.qrcode_temp;
ctx.drawImage(qrcode_temp, 0.1 * windowWidth, 0.35 * windowWidth, 0.8 * windowWidth, 180);
//绘制商品名称
const goodsTitle = that.data.bargainDetail.goodsName;
console.log(that.data.bargainDetail.goodsName)
let goodsTitleArray = [];
//为了防止标题过长，分割字符串,每行18个
for (let i = ; i < goodsTitle.length / 27; i++) {
if (i > ) {
break
}
goodsTitleArray.push(goodsTitle.substr(i * 27, 27));
}
goodsTitleArray.forEach(function (value) {
ctx.setFontSize(0.04 * windowWidth)
// ctx.setFillStyle(’#ffffff’);
ctx.setTextAlign(‘left’);
ctx.fillText(value, 0.1 * windowWidth, 0.92* windowWidth);
windowWidth += 25
});
// 商品价格
// 底价
var endPrice = that.data.bargainDetail.endPrice;
// ctx.setFillStyle(’#ffffff’)
ctx.setFontSize(0.05 * windowWidth)
ctx.setTextAlign(‘left’
ctx.fillText(‘底价:￥’ + endPrice, 0.1 * windowWidth, 0.97 * windowWidth)
// 原价
var goodsPrice = that.data.bargainDetail.goodsPrice;
ctx.setFillStyle(’#cccccc’
ctx.setFontSize(0.037 * windowWidth)
ctx.setTextAlign(‘left’
ctx.fillText(‘原价:￥’ + goodsPrice, 0.5 * windowWidth, 0.97 * windowWidth)
//绘制二维码
ctx.drawImage(qrPathUrl, 0.64 * windowWidth / 2.5, 1.02 * windowWidth, 0.4 * windowWidth, 0.4 * windowWidth)
//绘制第三段文本
// ctx.setFillStyle(’#ffffff’)
ctx.setFontSize(0.037 * windowWidth)
ctx.setTextAlign(‘center’
ctx.fillText(‘长按识别二维码帮我砍价’, windowWidth / 2.3, 1.5* windowWidth)
ctx.draw();
},
canvasToImage() {
var that = this
// canvas画布转成图片
wx.canvasToTempFilePath({
quality:
fileType: ‘jpg’
canvasId: ‘myCanvas’
success: function (res) {
wx.hideLoading();
console.log(‘11’ + res.tempFilePath);
that.setData({
img_temp: res.tempFilePath
})
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log(res);
},
fail: function (res) {
if (res.errMsg === “saveImageToPhotosAlbum:fail auth deny”) {
wx.openSetting({
success(settingdata) {
if (settingdata.authSetting[‘scope.writePhotosAlbum’]) {
wx.showToast({
title: ‘保存图片失败，请重新保存’
})
} else {
console.log(‘获取权限失败，给出不给权限就无法正常使用的提示’
}
}
})
}
}
})
},
fail: function (res) {
console.log(res)
}
}, this
},
强力驱动