海报自适应

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "version": "0.0.0",
   "scripts": {
   "scripts": {
     "ng": "ng",
     "ng": "ng",
-    "start": "ng serve --host 192.168.1.25",
+    "start": "ng serve --host 192.168.1.169",
     "build": "ng build -c=dev --prod",
     "build": "ng build -c=dev --prod",
     "test": "ng test",
     "test": "ng test",
     "lint": "ng lint",
     "lint": "ng lint",

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

-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { environment } from '../../../environments/environment';
-import { LifeCommonService } from '../../common/life-common.service';
-import { MyService } from '../my.service';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {environment} from '../../../environments/environment';
+import {LifeCommonService} from '../../common/life-common.service';
+import {MyService} from '../my.service';
 
 
 
 
 declare var QRCode: any;
 declare var QRCode: any;
@@ -33,9 +33,10 @@ export class MkMaterialDetailComponent implements OnInit {
   posterType: number;
   posterType: number;
   isMobileShow: number;
   isMobileShow: number;
   isNameShow: number;
   isNameShow: number;
+
   constructor(private activateRoute: ActivatedRoute,
   constructor(private activateRoute: ActivatedRoute,
-    private lifeCommonService: LifeCommonService,
-    private myService: MyService) {
+              private lifeCommonService: LifeCommonService,
+              private myService: MyService) {
   }
   }
 
 
   ngOnInit() {
   ngOnInit() {
@@ -52,7 +53,8 @@ export class MkMaterialDetailComponent implements OnInit {
     const ctx = canvas.getContext('2d');
     const ctx = canvas.getContext('2d');
     const ratio = this.getPixelRatio(ctx);
     const ratio = this.getPixelRatio(ctx);
     const W = document.body.clientWidth;
     const W = document.body.clientWidth;
-    const H = document.body.clientHeight;
+    // const H = document.body.clientHeight;
+    const H = W * (734 / 413);
     canvas.width = W * ratio;
     canvas.width = W * ratio;
     canvas.height = H * ratio;
     canvas.height = H * ratio;
     canvas.style.width = W + 'px';
     canvas.style.width = W + 'px';
@@ -75,6 +77,7 @@ export class MkMaterialDetailComponent implements OnInit {
     img.src = this.productPosterPath;
     img.src = this.productPosterPath;
     img.onload = () => {
     img.onload = () => {
       // 加载海报图
       // 加载海报图
+      // ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.width * (734 / 413));
       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 = 'rgba(0,0,0,0.15)';
       ctx.fillStyle = 'rgba(0,0,0,0.15)';
@@ -91,14 +94,14 @@ export class MkMaterialDetailComponent implements OnInit {
       // 设置base64编码格式值
       // 设置base64编码格式值
 
 
       if (this.materialItemType == '5') {
       if (this.materialItemType == '5') {
-        shareQr.src = `assets/images/online.jpg`
+        shareQr.src = `assets/images/online.jpg`;
       } else {
       } else {
         shareQr.src = qrcodeUrl;
         shareQr.src = qrcodeUrl;
       }
       }
       shareQr.onload = () => {
       shareQr.onload = () => {
         //二维码位置
         //二维码位置
         const qrcodeBgX = document.body.clientWidth - (this.rightWidth + this.qrcodeBgWidth + 20);
         const qrcodeBgX = document.body.clientWidth - (this.rightWidth + this.qrcodeBgWidth + 20);
-        const qrcodeBgY = document.body.clientHeight - (this.bottomHeight + this.qrcodeBgWidth);
+        const qrcodeBgY = H - (this.bottomHeight + this.qrcodeBgWidth);
         //二维码底边padding
         //二维码底边padding
         const qrcodeX = qrcodeBgX + this.qrcodePadding;
         const qrcodeX = qrcodeBgX + this.qrcodePadding;
         const qrcodeY = qrcodeBgY + this.qrcodePadding;
         const qrcodeY = qrcodeBgY + this.qrcodePadding;