<template>
<view class="login">
<u-navbar title="canvas" :is-back="false" title-color="#333"></u-navbar>
<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas>
</view>
</template>
<script>
var _this
export default {
components: {},
data() {
return {
canvasW:0,
canvasH:0,
SystemInfo:{},
goodsImg: {},
ewmImg:{},
title:'COCOSILIYA抖音爆款男女士鎏金沙香水持久自然淡香流沙金香水',
price:'158.00',
Oldprice:'350.00',
name:'天涯过客',
}
},
async onLoad() {
this.SystemInfo = await this.getSystemInfo();
this.goodsImg = await this.getImageInfo('http://api.yoronglife.com//uploads/attach/2020/10/20201020/7f0ecf34d9408f7fc3b789894483ab75.jpg');
this.ewmImg = await this.getImageInfo('https://qr.api.cli.im/newqr/create?data=https%253A%252F%252Fblog.csdn.net%252Fqq_40745143&level=H&transparent=0&bgcolor=%23FFFFFF&forecolor=%2F%2Fstatic.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F19.png&blockpixel=12&marginblock=2&logourl=images%2Flogo%2Ficon8.png&size=400&logoshape=no&eye_use_fore=1&background=&wper=0&hper=0&tper=0&lper=0&qrcode_eyes=pin-8.png&outcolor=&incolor=&qr_rotate=0&text=&fontfamily=msyh.ttf&fontsize=30&fontcolor=&logo_pos=0&kid=bizcliim&time=1603781935&key=8404dd8f20f9e85c2e786b27c568becc');
this.canvasW = this.SystemInfo.windowWidth;
this.canvasH = this.goodsImg.height + 120 + 50;
if(this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this.SystemInfo.errMsg == 'getSystemInfo:ok'){
console.log('ok')
uni.showToast({
icon:'loading',
mask:true,
duration:10000,
title: '海报绘制中',
});
setTimeout(()=>{
var ctx = uni.createCanvasContext('myCanvas', this);
// 1、填充背景色,白色
ctx.setFillStyle('#fff')
ctx.fillRect(0, 0, 750, 1050)
// 2、绘制商品图片
ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this.canvasW)
ctx.drawImage(this.ewmImg.path, this.canvasW-130, this.canvasW+10, 120, 120)
// 3、绘制商品标题,多余文字自动换行
ctx.setFontSize(16);
ctx.setFillStyle('#333');
let _strlineW = 0;
let _strLastIndex = 0; //每次开始截取的字符串的索引
let _strHeight = this.canvasW +30; //绘制字体距离canvas顶部的初始高度
let _num = 1;
for (let i = 0; i < this.title.length; i++) {
_strlineW += ctx.measureText(this.title[i]).width;
if (_strlineW > this.canvasW-155) {
if(_num == 2 && 2){
//文字换行数量大于二进行省略号处理
ctx.fillText(this.title.substring(_strLastIndex, i-5)+'...', 10, _strHeight);
_strlineW = 0;
_strLastIndex = i;
_num++;
break;
}else{
ctx.fillText(this.title.substring(_strLastIndex, i), 10, _strHeight);
_strlineW = 0;
_strHeight += 20;
_strLastIndex = i;
_num++;
}
}else if (i == this.title.length - 1) {
ctx.fillText(this.title.substring(_strLastIndex, i + 1), 10, _strHeight);
_strlineW = 0;
}
}
//4、商品价格
ctx.setFontSize(16)
ctx.setFillStyle('#e31d1a')
ctx.fillText('¥'+this.price, 10, this.canvasW +75);
ctx.setFontSize(12)
ctx.setFillStyle('#b8b8b8')
ctx.fillText('原价¥'+this.Oldprice, 100, this.canvasW +75);
// 5、邀请信息
ctx.setFontSize(16)
ctx.setFillStyle('#333')
ctx.fillText(this.name+'推荐给你', 10, this.canvasW +100);
ctx.setFontSize(14)
ctx.setFillStyle('#b8b8b8')
ctx.fillText('长按或扫描识别二维码', 10, this.canvasW +120);
ctx.draw(true,(ret)=>{// 画到 canvas 中。
console.log(ret)
});
uni.showToast({
icon:'success',
mask:true,
title: '绘制完成',
});
},1500)
}else{
console.log('err')
}
},
methods: {
// 获取图片信息
getImageInfo(image) {
return new Promise((req, rej) => {
uni.getImageInfo({
src: image,
success: function(res) {
req(res)
},
});
})
},
// 获取设备信息
getSystemInfo(){
return new Promise((req, rej) => {
uni.getSystemInfo({
success: function (res) {
req(res)
}
});
})
},
},
}
</script>
uniapp原生canvas绘制商品分享海报
最新推荐文章于 2024-06-17 14:58:27 发布