解决图片不清晰

angular.json

@@ -95,10 +95,10 @@
               "deployUrl": "",
               "deployUrl": "",
               "baseHref": "/ydLife/",
               "baseHref": "/ydLife/",
               "namedChunks": false,
               "namedChunks": false,
-              "aot": true,
+              "aot": false,
               "extractLicenses": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "vendorChunk": false,
-              "buildOptimizer": true,
+              "buildOptimizer": false,
               "budgets": [
               "budgets": [
                 {
                 {
                   "type": "initial",
                   "type": "initial",

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

@@ -5,8 +5,7 @@
 <!--<button id="download"> 下载图片</button>-->
 <!--<button id="download"> 下载图片</button>-->
 
 
 <!-- canvas 标签 主要用来进行图形的绘制-->
 <!-- canvas 标签 主要用来进行图形的绘制-->
-<canvas id="canvas" width="375" height="667" #canvas></canvas>
+<canvas id="canvas" #canvas></canvas>
 
 
 <!--生成图片-->
 <!--生成图片-->
-<img src="assets/images/mk-material/117.jpg" alt="" id="bannerPlaceHolder" class="img-responsive">
 <img src="" alt="" id="bannerImg" class="img-responsive">
 <img src="" alt="" id="bannerImg" class="img-responsive">

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

-#bannerPlaceHolder {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: auto;
-  max-width: 100%;
-  visibility: hidden;
-}
+

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

@@ -48,19 +48,22 @@ export class MkMaterialDetailComponent implements OnInit {
   }
   }
 
 
   canvasPic() {
   canvasPic() {
-    this.canvas.nativeElement.width = document.querySelector('#bannerPlaceHolder').clientWidth;
-    this.canvas.nativeElement.height = document.querySelector('#bannerPlaceHolder').clientHeight;
     const canvas = this.canvas.nativeElement as HTMLCanvasElement;
     const canvas = this.canvas.nativeElement as HTMLCanvasElement;
-    canvas.width = canvas.width * 1;
-    canvas.height = canvas.height * 1;
-    const qr = document.querySelector('#qrcode');
     const ctx = canvas.getContext('2d');
     const ctx = canvas.getContext('2d');
+    const ratio = this.getPixelRatio(ctx);
+    const W = document.body.clientWidth;
+    const H = document.body.clientHeight;
+    canvas.width = W * ratio;
+    canvas.height = H * ratio;
+    canvas.style.width = W + 'px';
+    canvas.style.height = H + 'px';
+    const qr = document.querySelector('#qrcode');
     const img = new Image();
     const img = new Image();
     // 画圆形头像
     // 画圆形头像
-    const avatarurlWidth = 50;    // 绘制的头像宽度
-    const avatarurlHeigth = 50;  // 绘制的头像高度
-    const avatarurlX = 10;  // 绘制的头像在画布上的位置
-    const avatarurlY = this.canvas.nativeElement.height - 130 + 47;  // 绘制的头像在画布上的位置
+    const avatarurlWidth = 50 * ratio;    // 绘制的头像宽度
+    const avatarurlHeigth = 50 * ratio;  // 绘制的头像高度
+    const avatarurlX = 10 * ratio;  // 绘制的头像在画布上的位置
+    const avatarurlY = this.canvas.nativeElement.height - 80 * ratio;  // 绘制的头像在画布上的位置
     const avatarImg = new Image();
     const avatarImg = new Image();
     avatarImg.src = `${environment.ORIGINNAME}/assets/img/meng.png`;
     avatarImg.src = `${environment.ORIGINNAME}/assets/img/meng.png`;
     // // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
     // // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
@@ -68,6 +71,8 @@ export class MkMaterialDetailComponent implements OnInit {
     img.onload = () => {
     img.onload = () => {
       ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
       ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
       ctx.save();
       ctx.save();
+      ctx.fillStyle = '#f5e7cd';
+      ctx.fillRect(0, this.canvas.nativeElement.height - 125 * ratio, this.canvas.nativeElement.width * ratio, 125 * ratio);
       ctx.beginPath(); // 开始绘制
       ctx.beginPath(); // 开始绘制
       // 先画个圆  前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
       // 先画个圆  前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
       ctx.arc(avatarurlWidth / 2 + avatarurlX, avatarurlHeigth / 2 + avatarurlY, avatarurlWidth / 2, 0, Math.PI * 2, false);
       ctx.arc(avatarurlWidth / 2 + avatarurlX, avatarurlHeigth / 2 + avatarurlY, avatarurlWidth / 2, 0, Math.PI * 2, false);
@@ -92,28 +97,40 @@ export class MkMaterialDetailComponent implements OnInit {
       // 设置base64编码格式值
       // 设置base64编码格式值
       shareQr.src = base64;
       shareQr.src = base64;
       shareQr.onload = () => {
       shareQr.onload = () => {
+        ctx.save();
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(document.body.clientWidth - 116, document.body.clientHeight - 116, 111, 111);
+        ctx.save();
         // 绘制图像  就是绘制二维码到我们自己写的canvas中去
         // 绘制图像  就是绘制二维码到我们自己写的canvas中去
-        ctx.drawImage(shareQr, this.canvas.nativeElement.width - 120, this.canvas.nativeElement.height - 130 + 10, 100, 100);
+        ctx.drawImage(shareQr, document.body.clientWidth - 110, document.body.clientHeight - 110, 100, 100);
         document.querySelector('#bannerImg').setAttribute('src', canvas.toDataURL('image/png', 1));
         document.querySelector('#bannerImg').setAttribute('src', canvas.toDataURL('image/png', 1));
         this.canvas.nativeElement.style.display = 'none';
         this.canvas.nativeElement.style.display = 'none';
       };
       };
       // 绘制字体
       // 绘制字体
-      ctx.font = 'bold 14px 微软雅黑';
-      ctx.fillStyle = '#081a71';
-      ctx.fillText('长按了解详情', this.canvas.nativeElement.width - 115, this.canvas.nativeElement.height - 5);
-      ctx.font = 'bold 15px 微软雅黑';
-      ctx.fillText(`银盾保险经纪 ${this.lifeCustomerInfo['practitionerBasicInfo']['name']}`, 75, this.canvas.nativeElement.height - 130 + 65);
-      ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 75, this.canvas.nativeElement.height - 25);
-      // ctx.fillText('微信号：123456', 70, this.canvas.nativeElement.height - 40);
+      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.mobileNo}`, 75 * ratio, this.canvas.nativeElement.height - 25 * ratio);
+      ctx.scale(ratio, ratio);
     };
     };
   }
   }
 
 
+  getPixelRatio(context) {
+    const backingStore = context.backingStorePixelRatio ||
+      context.webkitBackingStorePixelRatio ||
+      context.mozBackingStorePixelRatio ||
+      context.msBackingStorePixelRatio ||
+      context.oBackingStorePixelRatio ||
+      context.backingStorePixelRatio || 1;
+    return (window.devicePixelRatio || 1) / backingStore;
+  }
+
   shareCallBack() {
   shareCallBack() {
     this.myService.shareCallBack(this.shareInfo).subscribe(res => {
     this.myService.shareCallBack(this.shareInfo).subscribe(res => {
       if (res['success']) {
       if (res['success']) {
         setTimeout(() => {
         setTimeout(() => {
           this.canvasPic();
           this.canvasPic();
-        }, 0);
+        }, 500);
       } else {
       } else {
 
 
       }
       }