配置产品海报详情页面

src/app/my/mk-material-detail/mk-material-detail.component.ts

@@ -19,6 +19,10 @@ export class MkMaterialDetailComponent implements OnInit {
   contentHeight: number = 90;
   // 二维码宽度
   qrcodeWidth: number = 70;
+  qrcodeBgWidth: number = 80;
+  qrcodePadding: number = 5;
+  rightWidth: number = 5;
+  bottomHeight: number = 5;
 
   constructor(private activateRoute: ActivatedRoute,
               private lifeCommonService: LifeCommonService,
@@ -42,7 +46,6 @@ export class MkMaterialDetailComponent implements OnInit {
   }
 
   canvasPic() {
-    // debugger;
     const canvas = this.canvas.nativeElement as HTMLCanvasElement;
     const ctx = canvas.getContext('2d');
     const ratio = this.getPixelRatio(ctx);
@@ -58,7 +61,7 @@ export class MkMaterialDetailComponent implements OnInit {
     const avatarurlWidth = 50 * ratio;    // 绘制的头像宽度
     const avatarurlHeigth = 50 * ratio;  // 绘制的头像高度
     const avatarurlX = 10 * ratio;  // 绘制的头像在画布上的位置
-    const avatarurlY = this.canvas.nativeElement.height - this.contentHeight / 2 * ratio - 50 / 2 * ratio;  // 绘制的头像在画布上的位置
+    const avatarurlY = this.canvas.nativeElement.height - (this.contentHeight + 50) / 2 * ratio;  // 绘制的头像在画布上的位置
     const avatarImg = new Image();
     avatarImg.src = `${environment.ORIGINNAME}/assets/img/meng.png`;
     // // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
@@ -91,23 +94,27 @@ export class MkMaterialDetailComponent implements OnInit {
       const base64 = newCanvas.toDataURL('image/png', 1);
       // 这里的image只能在onload里面绘制 在外面就会被覆盖了 因为优先加载完毕就会优先绘制 然后就被之后绘制的海报背景遮挡了
       const shareQr = new Image();
+      const qrcodeBgX = document.body.clientWidth - (this.rightWidth + this.qrcodeBgWidth);
+      const qrcodeBgY = document.body.clientHeight - (this.bottomHeight + this.qrcodeBgWidth);
+      const qrcodeX = qrcodeBgX + this.qrcodePadding;
+      const qrcodeY = qrcodeBgY + this.qrcodePadding;
       // 设置base64编码格式值
       shareQr.src = base64;
       shareQr.onload = () => {
         ctx.save();
         ctx.fillStyle = '#fff';
-        ctx.fillRect(document.body.clientWidth - (14 + this.qrcodeWidth), document.body.clientHeight - (this.qrcodeWidth + 9), this.qrcodeWidth + 8, this.qrcodeWidth + 8);
+        ctx.fillRect(qrcodeBgX, qrcodeBgY, this.qrcodeBgWidth, this.qrcodeBgWidth);
         ctx.save();
         // 绘制图像  就是绘制二维码到我们自己写的canvas中去
-        ctx.drawImage(shareQr, document.body.clientWidth - (10 + this.qrcodeWidth), document.body.clientHeight - (this.qrcodeWidth + 5), this.qrcodeWidth, this.qrcodeWidth);
+        ctx.drawImage(shareQr, qrcodeX, qrcodeY, this.qrcodeWidth, this.qrcodeWidth);
         document.querySelector('#bannerImg').setAttribute('src', canvas.toDataURL('image/png', 1));
         this.canvas.nativeElement.style.display = 'none';
       };
       // 绘制字体
       ctx.fillStyle = '#000';
       ctx.font = `bold ${15 * ratio}px 微软雅黑`;
-      ctx.fillText(`银盾保险经纪 ${this.lifeCustomerInfo.practitionerBasicInfo.name}`, 75 * ratio, this.canvas.nativeElement.height - (this.contentHeight / 2 ) * ratio);
-      ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 75 * ratio, this.canvas.nativeElement.height - (this.contentHeight / 2 - 20) * ratio);
+      ctx.fillText(`银盾保险经纪 ${this.lifeCustomerInfo.practitionerBasicInfo.name}`, 75 * ratio, avatarurlY + 15 * ratio); // Y指的是文字底部的位置
+      ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 75 * ratio, avatarurlY + 45 * ratio);
       ctx.scale(ratio, ratio);
     };
   }