画板生成海报图
<canvas id="myCanvas" canvas-id="myCanvas" style="width: 320px; height: 520px" @longpress="saveTheQrCode(goods_poster)"></canvas>
网络生成的图片需要使用 promose进行一下异步处理这样可以方式因为异步问题造成海报无法生成
getImageInfo(image) {
return new Promise((req, rej) => {
uni.getImageInfo({
src: image,
success: function (res) {
req(res)
}
})
})
},
绘制海报的对应方法解释 async 生成海报做成异步的（注意一点画板从上到下一层一层的最下面的代码在最上层）
// 生成海报
async clickGenerate() {
uni.showLoading({
title: '正在绘制'
})
let goods_img = 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
//对网络图片进行处理
let backImg = await this.getImageInfo(goods_img)
const ctx = uni.createCanvasContext('myCanvas')
//设置填充色，不设置默认就是 black
ctx.setFillStyle('#00be88')
//设置色块颜色 参数1 为X轴偏移距离 参数2 为Y轴偏移距离 参数3 为色块宽度 参数4 为色块高度
ctx.fillRect(0, 0, 320, 540)
//设置图片在画布上的位置 参数1 为图片地址 参数2 为X轴偏转距离 参数3 为图片宽度 参数4 为图片高度
ctx.drawImage(backImg.path, 10, 10, 300, 300)
ctx.setFillStyle('#fff')
ctx.fillRect(10, 310, 300, 180)
//设置字体大小
ctx.setFontSize(16)
ctx.setFillStyle('#333')
//因为画板不支持直接换行 借鉴大佬的
let _strlineW = 0;
let _strLastIndex = 0; //每次开始截取的字符串的索引
let _strHeight = 300 + 30; //绘制字体距离canvas顶部的初始高度
let _num = 1;
for (let i = 0; i < this.details_info.name.length; i++) {
//计算每个字符的宽度
_strlineW += ctx.measureText(this.details_info.name[i]).width;
//判断当前宽度是否需要换行
if (_strlineW > 300 - 20) {
//判断是否五第二行
if (_num == 2 && 2) {
//文字换行数量大于二进行省略号处理
ctx.fillText(this.details_info.name.substring(_strLastIndex, i - 5) + '...', 20, _strHeight);
_strlineW = 0;
_strLastIndex = i;
_num++;
break;
} else {
ctx.fillText(this.details_info.name.substring(_strLastIndex, i), 20, _strHeight);
_strlineW = 0;
_strHeight += 20;
_strLastIndex = i;
_num++;
}
} else if (i == this.details_info.name.length - 1) {
ctx.fillText(this.details_info.name.substring(_strLastIndex, i + 1), 20, _strHeight);
_strlineW = 0;
}
}
ctx.setFontSize(20)
ctx.setFillStyle('red')
ctx.fillText('￥' + this.details_info.sale_price, 20, 376);
ctx.setFontSize(16)
ctx.setFillStyle('#ccc')
let priceW = ctx.measureText('￥' + this.details_info.sale_price).width;
ctx.fillText(this.details_info.sale_price, priceW + 50, 376);
ctx.setFillStyle('#00be88')
ctx.fillText('----------------------------------------------', 10, 390, 300);
ctx.drawImage(this.code_img, 40, 410, 60, 60)
ctx.setFontSize(14)
ctx.setFillStyle('#333')
ctx.fillText('保存海报图', 160, 422);
ctx.setFontSize(12)
ctx.fillText('好货要和朋友一起分享', 160, 442);
ctx.fillText(this.$store.getters.userInfo.username, 160, 462);
ctx.setFillStyle('#fff')
ctx.setFontSize(16)
ctx.fillText('康复管家', 128, 510);
ctx.draw()
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
quality: 1,
complete: function (res) {
console.log(res);
thar.goods_poster = res.tempFilePath
console.log(res.tempFilePath);
uni.hideLoading()
uni.showToast({
title: '绘制完成', //标题
duration: 2000 //显示时间
})
}
})
}, 1500)
},
标签：info,海报,画板,setFillStyle,ctx,fillText,生成,let,details From： https://www.cnblogs.com/yugueilou/p/17477383.html