canvas图片在真机上不显示?
发布于 5 年前 作者 fxia 1487 次浏览 来自 问答

圈起来部分在真机上不显示  代码如下:

let ctx = wx.createCanvasContext(‘customCanvas’)

let text = res.goods_list[0].goods_name

let textTeam = res.team_name

ctx.beginPath()

ctx.setFillStyle(’#000’)

ctx.setFontSize(16)

// 中间文字

that.dealWords({

//画布上下文

ctx: ctx,

//字体大小

fontSize: 22,

//需要处理的文字

word: text,

//一行文字最大宽度

maxWidth: 290,

//文字在x轴要显示的位置

x: 50,

//文字在y轴要显示的位置

y: 110,

//文字最多显示的行数

maxLine: 1

})

// 底部图片圆

let x =50;

for(let  i =0;i<3;i++){

console.log(res.goods_list[i].goods_pic,i)

if(i==0){

ctx.drawImage(res.goods_list[i].goods_pic,x, 170, 80, 80);

}else{

ctx.drawImage(res.goods_list[i].goods_pic, x += 100, 170, 80, 80);

}

}

// 底部文字

ctx.setFillStyle(‘gray’)

that.dealWords({

ctx: ctx,

fontSize: 16,

word: textTeam,

maxWidth: 230,

x: 50,

y: 136,

maxLine: 2

})

// 通过回调把canvas画布生成图片

ctx.draw(false, () => {

setTimeout(() => {

wx.canvasToTempFilePath({

canvasId: ‘customCanvas’,

success: (res) => {

let thatsz = thats1

console.log(res.tempFilePath)

wx.saveFile({

//把文件保存到本地

tempFilePath: res.tempFilePath,

success: function (resl) {

console.log(resl.savedFilePath)

thatsz.setData({

picUrl: resl.savedFilePath

});

}

})

}

}, that);

}, 300); //此处加入300毫秒延时是为了解决小程序绘制过程中的渲染问题

});

1 回复

先把图片down下来,做成二进制数据,然后画

回到顶部