html52.com
我爱小程序-开发者交流社区

cavas绘制图片在真机上不显示?

在线上的小程序绘制图片不显示,之前体验版本打开调试之后绘制图片页面就会出现图片?也使用了 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()

}

})



})


},


网友回复

undefined:

代码怎么写的

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付