|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<view >
|
|
|
<view class="postcontent" v-if="isShow" @click.stop="isShow=false">
|
|
|
- <canvas @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas"></canvas>
|
|
|
- <view class="text-center text-white">长按保存图片</view>
|
|
|
+ <canvas id='canvas' @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas"></canvas>
|
|
|
+ <!-- <view class="text-center text-white">长按保存图片</view> -->
|
|
|
</view>
|
|
|
<u-popup v-model="imgShow" mode="center" width="640" height="940upx" border-radius="16">
|
|
|
<image :src="imgUrl" style="width: 640upx;height: 940upx;"></image>
|
|
|
@@ -43,8 +43,8 @@
|
|
|
})
|
|
|
this.ctx = uni.createCanvasContext('my-canvas', this)
|
|
|
// this.canvasW = uni.upx2px(550);
|
|
|
- this.canvasW = uni.getSystemInfoSync().windowWidth-uni.upx2px(80)
|
|
|
- this.canvasH = this.canvasW*2-uni.upx2px(400)
|
|
|
+ this.canvasW = uni.getSystemInfoSync().windowWidth-uni.upx2px(120)
|
|
|
+ this.canvasH = this.canvasW*2 - uni.upx2px(330)
|
|
|
//设置画布背景透明
|
|
|
this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
|
|
|
//设置画布大小
|
|
|
@@ -58,74 +58,48 @@
|
|
|
|
|
|
//绘制标题
|
|
|
//绘制标题
|
|
|
- this.ctx.setFontSize(12); //设置标题字体大小
|
|
|
- this.ctx.setFillStyle('#333'); //设置标题文本颜色
|
|
|
- let titleWidth = this.ctx.measureText(this.works.title).width
|
|
|
- if(titleWidth > hW){
|
|
|
- this.ctx.fillText(this.works.title.slice(0,25),((this.canvasW-hW) / 2),((this.canvasW-hW) / 2))
|
|
|
- this.ctx.fillText(this.works.title.slice(25,50),((this.canvasW-hW) / 2),((this.canvasW-hW) / 2) + uni.upx2px(46))
|
|
|
- } else{
|
|
|
- this.ctx.fillText(this.works.title,((this.canvasW-hW) / 2),((this.canvasW-hW) / 2))
|
|
|
- }
|
|
|
+ // this.ctx.setFontSize(12); //设置标题字体大小
|
|
|
+ // this.ctx.setFillStyle('#333'); //设置标题文本颜色
|
|
|
+ // let titleWidth = this.ctx.measureText(this.works.title).width
|
|
|
+ // if(titleWidth > hW){
|
|
|
+ // this.ctx.fillText(this.works.title.slice(0,25),((this.canvasW-hW) / 2),((this.canvasW-hW) / 2))
|
|
|
+ // this.ctx.fillText(this.works.title.slice(25,50),((this.canvasW-hW) / 2),((this.canvasW-hW) / 2) + uni.upx2px(46))
|
|
|
+ // } else{
|
|
|
+ // this.ctx.fillText(this.works.title,((this.canvasW-hW) / 2),((this.canvasW-hW) / 2))
|
|
|
+ // }
|
|
|
|
|
|
//绘制标题图
|
|
|
- this.drawRoundImg(this.ctx,headerImg.path,((this.canvasW-hW) / 2-uni.upx2px(12)),((this.canvasW-hW) / 2) + uni.upx2px(80),hW + uni.upx2px(28),hW + uni.upx2px(28),uni.upx2px(16))
|
|
|
+ this.drawRoundImg(this.ctx,headerImg.path,((this.canvasW-hW) / 2-uni.upx2px(10)),((this.canvasW-hW) / 2) - uni.upx2px(10),hW + uni.upx2px(20),hW + uni.upx2px(20),uni.upx2px(16))
|
|
|
|
|
|
+ //绘制名称
|
|
|
+ this.ctx.setFontSize(24);
|
|
|
+ this.ctx.setFillStyle('#000000');
|
|
|
+ this.ctx.fillText(this.works.title ,((this.canvasW-hW) / 2) + uni.upx2px(2),(((this.canvasW-hW) / 2) + hH + uni.upx2px(280)))
|
|
|
//绘制副标题
|
|
|
- // this.ctx.setFontSize(14);
|
|
|
- // this.ctx.setFillStyle('#858585');
|
|
|
- // this.ctx.fillText(this.worksIntro.slice(0,19) ,((this.canvasW-hW) / 2) + uni.upx2px(20),(
|
|
|
- // ((this.canvasW-hW) / 2) + hH + uni.upx2px(160)))
|
|
|
- // this.ctx.fillText(this.worksIntro.slice(19,39) ,((this.canvasW-hW) / 2),(
|
|
|
- // ((this.canvasW-hW) / 2) + hH + uni.upx2px(200)))
|
|
|
- // this.ctx.fillText(this.worksIntro.slice(39,59) ,((this.canvasW-hW) / 2),(
|
|
|
- // ((this.canvasW-hW) / 2) + hH + uni.upx2px(240)))
|
|
|
- // this.ctx.fillText(this.worksIntro.slice(58,75)+'...' ,((this.canvasW-hW) / 2),(
|
|
|
- // ((this.canvasW-hW) / 2) + hH + uni.upx2px(280)))
|
|
|
- //绘制副标题
|
|
|
- // this.ctx.setFontSize(14);
|
|
|
- // this.ctx.setFillStyle('#858585');
|
|
|
- // let ksWidth = this.ctx.measureText(this.product.dept).width
|
|
|
- // if(ksWidth > hW){
|
|
|
- // this.ctx.fillText('【'+this.str2+'】'+this.product.dept.slice(0,16) + '...',((this.canvasW-hW) / 2),(
|
|
|
- // ((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(50))
|
|
|
- // }else{
|
|
|
- // this.ctx.fillText('【'+this.str2+'】'+this.product.dept,((this.canvasW-hW) / 2),(
|
|
|
- // ((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(50))
|
|
|
- // }
|
|
|
- //绘制副标题
|
|
|
- // this.ctx.setFontSize(14);
|
|
|
- // this.ctx.setFillStyle('#858585');
|
|
|
- // let qdWidth = this.ctx.measureText(this.product.investmentChannel).width
|
|
|
- // if(qdWidth > hW){
|
|
|
- // this.ctx.fillText('【'+this.str3+'】'+this.product.investmentChannel.slice(0,16) + '...',((this.canvasW-hW) / 2),(
|
|
|
- // ((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(100))
|
|
|
- // }else{
|
|
|
- // this.ctx.fillText('【'+this.str3+'】'+this.product.investmentChannel,((this.canvasW-hW) / 2),(
|
|
|
- // ((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(100))
|
|
|
- // }
|
|
|
- //绘制副标题
|
|
|
- // this.ctx.setFontSize(14);
|
|
|
- // this.ctx.setFillStyle('#858585');
|
|
|
- // let dqWidth = this.ctx.measureText(this.product.investmentAreas).width
|
|
|
- // if(dqWidth > hW){
|
|
|
- // this.ctx.fillText('【'+this.str4+'】'+this.product.investmentAreas.slice(0,16) + '...',((this.canvasW-hW) / 2),(
|
|
|
- // ((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(150))
|
|
|
- // }else{
|
|
|
- // this.ctx.fillText('【'+this.str4+'】'+this.product.investmentAreas,((this.canvasW-hW) / 2),(
|
|
|
- // ((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(150))
|
|
|
- // }
|
|
|
+ this.ctx.setFontSize(12);
|
|
|
+ this.ctx.setFillStyle('#c7c7c7');
|
|
|
+ this.ctx.fillText("赶紧为你的爱豆打榜吧" ,((this.canvasW-hW) / 2) + uni.upx2px(2),(((this.canvasW-hW) / 2) + hH + uni.upx2px(325)))
|
|
|
+
|
|
|
+ //绘制热力值
|
|
|
+ this.ctx.setFontSize(24);
|
|
|
+ this.ctx.setFillStyle('#000000');
|
|
|
+ this.ctx.fillText(this.works.hotValue ,((this.canvasW-hW) / 2) + uni.upx2px(380),(((this.canvasW-hW) / 2) + hH + uni.upx2px(280)))
|
|
|
+
|
|
|
+ //绘制排名
|
|
|
+ this.ctx.setFontSize(12);
|
|
|
+ this.ctx.setFillStyle('#000000');
|
|
|
+ this.ctx.fillText("热力榜第"+this.works.rank ,((this.canvasW-hW) / 2) + uni.upx2px(410),(((this.canvasW-hW) / 2) + hH + uni.upx2px(320)))
|
|
|
+
|
|
|
//提示文案
|
|
|
this.ctx.setFontSize(12);
|
|
|
this.ctx.setFillStyle('#858585');
|
|
|
- this.ctx.fillText('长按识别二维码',(((this.canvasW-hW) / 2)),(((this.canvasW-hW) / 2) + hH + uni.upx2px(400)))
|
|
|
- this.ctx.fillText('投票小程序',(((this.canvasW-hW) / 2)),(((this.canvasW-hW) / 2) + hH + uni.upx2px(440)))
|
|
|
+ this.ctx.fillText('来自 '+ this.works.name +' 的分享',(((this.canvasW-hW) / 2)),(((this.canvasW-hW) / 2) + hH + uni.upx2px(440)))
|
|
|
//底部广告
|
|
|
// let BottomAdImg = await this.getImageInfo(this.abImg)
|
|
|
// this.ctx.drawImage(BottomAdImg.path,(((this.canvasW-hW) / 2)),(((this.canvasW-hW) / 2) + hH + uni.upx2px(310)),uni.upx2px(350),uni.upx2px(110))
|
|
|
//小程序码
|
|
|
let qrcodeImg = await this.getImageInfo(this.works.qrcode)
|
|
|
- this.ctx.drawImage(qrcodeImg.path,uni.upx2px(470),(((this.canvasW-hW) / 2) + hH + uni.upx2px(340)), uni.upx2px(150), uni.upx2px(150))
|
|
|
+ this.ctx.drawImage(qrcodeImg.path,uni.upx2px(450),(((this.canvasW-hW) / 2) + hH + uni.upx2px(360)), uni.upx2px(150), uni.upx2px(150))
|
|
|
//延迟渲染
|
|
|
setTimeout(()=>{
|
|
|
this.ctx.draw(true,()=>{
|
|
|
@@ -212,7 +186,7 @@
|
|
|
},
|
|
|
//保存图片到相册
|
|
|
saveImage(){
|
|
|
- var that = this
|
|
|
+ var that = this;
|
|
|
uni.canvasToTempFilePath({
|
|
|
canvasId: 'my-canvas',
|
|
|
quality: 1,
|
lyqu