海报

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

@@ -8,4 +8,5 @@
 <canvas id="canvas" width="375" height="667" #canvas></canvas>
 
 <!--生成图片-->
-<img src="" alt="" id="bannerImg">
+<img src="assets/images/mk-material/117.jpg" alt="" id="bannerPlaceHolder" 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

@@ -45,8 +45,8 @@ export class MkMaterialDetailComponent implements OnInit {
   }
 
   canvasPic() {
-    this.canvas.nativeElement.width = window.screen.width;
-    this.canvas.nativeElement.height = window.screen.height;
+    this.canvas.nativeElement.width = document.querySelector('#bannerPlaceHolder').clientWidth;
+    this.canvas.nativeElement.height = document.querySelector('#bannerPlaceHolder').clientHeight;
     const canvas = this.canvas.nativeElement as HTMLCanvasElement;
     canvas.width = canvas.width * 1;
     canvas.height = canvas.height * 1;

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

 <div class="materialContainer">
   <div class="materialItem" *ngFor="let materialItem of materialLists;index as i"
        [routerLink]="['/material',materialItem.itemId]">
-    <div>
+    <div style="width: 90%;">
       <img src="{{'assets/images/mk-material/'+materialItem.itemId+'.png'}}" alt="" class="img-responsive">
     </div>
     <div class="title">{{materialItem.title}}</div>

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

@@ -5,6 +5,7 @@
   grid-row-gap: 10px;
   grid-column-gap: 10px;
   .materialItem {
+    position: relative;
     height: 200px;
     overflow: hidden;
     display: flex;