在线上的小程序绘制图片不显示,之前体验版本打开调试之后绘制图片页面就会出现图片?也使用了 wx.getImageInfo({}) 将后台返回的线上网址进行了转换,可是在线上就是不展示,
onReady: function() {
wx.showLoading({
title: '加载中...',
mask: true
})
let that = this
util.request(['accessSystem', 'getScanDrive'], [{
id: Number(wx.getStorageSync('driverId'))
}], res => {
console.log(res, '查看二维码信息')
wx.getImageInfo({ // 根据头像地址下载头像并存为临时路径
src: res,
success: res1 => {
wx.hideLoading()
console.log(res1.path, '查看临时存的路径图片')
that.setData({
// code: 'data:image/png;base64,' + res
code: res1.path
})
console.log(that.data.code, '查看数据情况')
// 生命周期函数--监听页面初次渲染完成
var ctx = wx.createCanvasContext('canvas')
// 设置背景
ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 0, 343, 212)
// logo
ctx.drawImage(this.data.logo, 0, 0, 343, 212)
// logo下线条
ctx.setStrokeStyle("rgba(0,0,0,.1)")
ctx.setLineWidth(0.3)
ctx.moveTo(0, 49)
ctx.lineTo(300, 49)
ctx.stroke()
// 所在城市
ctx.setFontSize(11)
ctx.setFillStyle("#fff")
textHandle(this.data.title, 20, 38, 170, 18);
// 商品介绍
ctx.setFontSize(10)
ctx.setFillStyle("#424752")
textHandle(this.data.text, 10, 201, 170, 15);
var dimension = ctx.measureText(this.data.text)
console.log(dimension.width)
ctx.drawImage(this.data.textImg, dimension.width + 12, 191, 26, 12);
ctx.setFontSize(10)
ctx.setFillStyle("#424752")
textHandle(this.data.conpanyName, dimension.width + 40, 201, 170, 15);
var dimension1 = ctx.measureText(this.data.conpanyName).width
ctx.drawImage(this.data.textImgLast, dimension.width + dimension1 + 46, 191, 46, 12);
ctx.drawImage(this.data.code, 230, 40, 80, 80);
function textHandle(text, numX, numY, textWidth, lineHeight) {
var chr = text.split(""); // 将一个字符串分割成字符串数组
var temp = "";
var row = [];
for (var a = 0; a < chr.length; a++) {
if (ctx.measureText(temp).width < textWidth) {
temp += chr[a];
} else {
a--; // 添加a--,防止字符丢失
row.push(temp);
temp = "";
}
}
row.push(temp);
// 如果数组长度大于2 则截取前两个
if (row.length > 2) {
var rowCut = row.slice(0, 2);
var rowPart = rowCut[1];
var test = "";
var empty = [];
for (var a = 0; a < rowPart.length; a++) {
if (ctx.measureText(test).width < textWidth - 10) {
test += rowPart[a];
} else {
break;
}
}
empty.push(test);
var group = empty[0] + "..."; // 这里只显示两行,超出的用...展示
rowCut.splice(1, 1, group);
row = rowCut;
}
for (var b = 0; b < row.length; b++) {
ctx.fillText(row[b], numX, numY + b * lineHeight);
}
}
// 完成
ctx.draw()
}
})
})
},