二维码生成的时候变量的控制

efd8abcb · Sweet Zhang · 571a94f1 · efd8abcb · efd8abcb
Commit efd8abcb authored Dec 31, 2019 by Sweet Zhang
Hide whitespace changes
Inline Side-by-side

Showing with 26 additions and 19 deletions

src/app/my/mk-material-detail/mk-material-detail.component.html
+1 -1

src/app/my/mk-material-detail/mk-material-detail.component.ts
+25 -18

No files found.
--- a/src/app/my/mk-material-detail/mk-material-detail.component.html
+++ b/src/app/my/mk-material-detail/mk-material-detail.component.html
@@ -8,4 +8,4 @@
 <canvas id="canvas" #canvas></canvas>
 <!--生成图片-->
-<img src="" alt="" id="bannerImg" class="img-responsive">
+<!--<img src="" alt="" id="bannerImg" class="img-responsive">-->
--- a/src/app/my/mk-material-detail/mk-material-detail.component.ts
+++ b/src/app/my/mk-material-detail/mk-material-detail.component.ts
@@ -15,6 +15,10 @@ export class MkMaterialDetailComponent implements OnInit {
  materialItemId: string;
  lifeCustomerInfo: any;
  shareInfo: any;
+  // 自定义内容部分高度
+  contentHeight: number = 90;
+  // 二维码宽度
+  qrcodeWidth: number = 70;
  constructor(private activateRoute: ActivatedRoute,
              private lifeCommonService: LifeCommonService,
@@ -37,17 +41,8 @@ export class MkMaterialDetailComponent implements OnInit {
    this.shareCallBack();
  }
-  download(canvas) {
-    const a = document.createElement('a');
-    // 设置地址
-    a.href = canvas.toDataURL('image/png', 1);
-    // 设置下载名称
-    a.download = '银盾保险经纪';
-    // 触发点击事件
-    a.click();
-  }
  canvasPic() {
+    // debugger;
    const canvas = this.canvas.nativeElement as HTMLCanvasElement;
    const ctx = canvas.getContext('2d');
    const ratio = this.getPixelRatio(ctx);
@@ -63,16 +58,17 @@ export class MkMaterialDetailComponent implements OnInit {
    const avatarurlWidth = 50 * ratio;    // 绘制的头像宽度
    const avatarurlHeigth = 50 * ratio;  // 绘制的头像高度
    const avatarurlX = 10 * ratio;  // 绘制的头像在画布上的位置
-    const avatarurlY = this.canvas.nativeElement.height - 80 * ratio;  // 绘制的头像在画布上的位置
+    const avatarurlY = this.canvas.nativeElement.height - this.contentHeight / 2 * ratio - 50 / 2 * ratio;  // 绘制的头像在画布上的位置
    const avatarImg = new Image();
    avatarImg.src = `${environment.ORIGINNAME}/assets/img/meng.png`;
    // // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
    img.src = `${environment.ORIGINNAME}/ydLife/assets/images/mk-material/${this.materialItemId}.jpg`;
    img.onload = () => {
+      // 加载海报图
      ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
      ctx.save();
      ctx.fillStyle = '#f5e7cd';
-      ctx.fillRect(0, this.canvas.nativeElement.height - 125 * ratio, this.canvas.nativeElement.width * ratio, 125 * ratio);
+      ctx.fillRect(0, this.canvas.nativeElement.height - this.contentHeight * ratio, this.canvas.nativeElement.width * ratio, this.contentHeight * ratio);
      ctx.beginPath(); // 开始绘制
      // 先画个圆  前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
      ctx.arc(avatarurlWidth / 2 + avatarurlX, avatarurlHeigth / 2 + avatarurlY, avatarurlWidth / 2, 0, Math.PI * 2, false);
@@ -82,10 +78,11 @@ export class MkMaterialDetailComponent implements OnInit {
      ctx.save();
      // 对二维码进行初始化
      const qrCode = new QRCode(qr, {
-        width: 60,
+        width: 100,
-        height: 60,
+        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.H
      });
      // 为二维码设置内容
      qrCode.makeCode(this.shareInfo.url);
@@ -99,22 +96,23 @@ export class MkMaterialDetailComponent implements OnInit {
      shareQr.onload = () => {
        ctx.save();
        ctx.fillStyle = '#fff';
-        ctx.fillRect(document.body.clientWidth - 116, document.body.clientHeight - 116, 111, 111);
+        ctx.fillRect(document.body.clientWidth - (14 + this.qrcodeWidth), document.body.clientHeight - (this.qrcodeWidth + 9), this.qrcodeWidth + 8, this.qrcodeWidth + 8);
        ctx.save();
        // 绘制图像  就是绘制二维码到我们自己写的canvas中去
-        ctx.drawImage(shareQr, document.body.clientWidth - 110, document.body.clientHeight - 110, 100, 100);
+        ctx.drawImage(shareQr, document.body.clientWidth - (10 + this.qrcodeWidth), document.body.clientHeight - (this.qrcodeWidth + 5), 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 - 65 * ratio);
+      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 - 25 * ratio);
+      ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 75 * ratio, this.canvas.nativeElement.height - (this.contentHeight / 2 - 20) * ratio);
      ctx.scale(ratio, ratio);
    };
  }
+  // 获取像素比
  getPixelRatio(context) {
    const backingStore = context.backingStorePixelRatio ||
      context.webkitBackingStorePixelRatio ||
@@ -137,4 +135,13 @@ export class MkMaterialDetailComponent implements OnInit {
    });
  }
+  download(canvas) {
+    const a = document.createElement('a');
+    // 设置地址
+    a.href = canvas.toDataURL('image/png', 1);
+    // 设置下载名称
+    a.download = '银盾保险经纪';
+    // 触发点击事件
+    a.click();
+  }
 }