[完善]细节

src/app/pages/get-out-of-line-details/get-out-of-line-details.component.html

@@ -18,14 +18,18 @@
   </div>
   <div class="typecheckbox" *ngIf="isAnxin">
     <label *ngFor="let item of this.legendList" nz-checkbox [(ngModel)]="item.checked"
-      (ngModelChange)="typeChange(item)">{{typeArr[item.id].name}}</label>
+      (ngModelChange)="typeChange(item)">
+      <div style="width: 10px;height: 10px;display: inline-block;" [ngStyle]="{'background': typeArr[item.id].color}">
+      </div>
+      {{typeArr[item.id].name}}
+    </label>
+    <button nz-button nzType="primary" (click)="downImg()">导出图片</button>
   </div>
   <div class="content">
-    <div *ngIf="selectedType == 'img'" class="imgbox">
+    <div *ngIf="selectedType == 'img'" class="imgbox" [ngClass]="{'imgboxAX': isAnxin}">
       <ng-container *ngIf="imgUrl; else elseTemplate">
-
         <img id="img" [src]="imgUrl" alt="" (error)="imgErr()">
-        <canvas [width]="canvasWidth" [height]="canvasHeight"
+        <canvas *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
           [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
         <span *ngIf="isSrcError">
           图片资源未找到

src/app/pages/get-out-of-line-details/get-out-of-line-details.component.scss

@@ -1,6 +1,6 @@
 .box {
   width: 100%;
-  height: 715px;
+  min-height: 715px;
   // overflow-y: auto;
   color: #fff;
   display: flex;
@@ -61,18 +61,23 @@
   box-sizing: border-box;
   padding: 0 12px;
 }
-.typecheckbox{
+
+.typecheckbox {
   box-sizing: border-box;
   padding: 0 12px;
-  label{
+  margin-bottom:6px;
+  label {
     color: #fff;
   }
 
 }
+
 .content {
   flex: 1;
   overflow: hidden;
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
   .imgbox {
     width: 100%;
     height: 100%;
@@ -80,18 +85,28 @@
     align-items: center;
     justify-content: center;
     position: relative;
-    #canvas{
+    margin-bottom: 12px;
+
+    #canvas {
       position: absolute;
       left: 50%;
       top: 50%;
-      transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
     }
+
     img {
       max-width: 100%;
       max-height: 100%;
     }
   }
 
+  .imgboxAX {
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+
   .vediobox {
     width: 100%;
     height: 100%;
@@ -147,16 +162,19 @@
   .disposeTime {}
 
 }
-.btnbox{
+
+.btnbox {
   width: 100%;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
-  button{
+
+  button {
     margin: 0 15px;
   }
 }
+
 .ant-modal-close {
   color: #fff;
 }

src/app/pages/get-out-of-line-details/get-out-of-line-details.component.ts

@@ -137,7 +137,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       this.ctx.fillText(
         name,
         startPoint[0],
-        startPoint[1] < 20 ? endPoint[1] + 16 : startPoint[1]
+        startPoint[1] < 20 ? endPoint[1] + 16 : startPoint[1] - 5
       );
     });
   }
@@ -157,6 +157,19 @@ export class GetOutOfLineDetailsComponent implements OnInit {
     this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
     this.strokeRect(this.currentCoordinate);
   }
+
+  downImg() {
+    const canvasDom: any = document.querySelector("#canvas");
+    const imageData = canvasDom.toDataURL("image/png"); //返回base64的URL
+    const elink = document.createElement("a");
+    elink.download = "图片";
+    elink.style.display = "none";
+    elink.href = imageData;
+    document.body.appendChild(elink);
+    elink.click();
+    URL.revokeObjectURL(elink.href); //释放URL对象
+    document.body.removeChild(elink);
+  }
   selectedType: string = "img";
   contentType(type) {
     this.selectedType = type;