初始化canvas，等比缩放背景图

src/app/system-management/plotting-image/plotting-image.component.html

@@ -0,0 +1,3 @@
+<div class="content">
+    <div class="center" id="center"><canvas id="canvas" [width]="canvasWidth" [height]="canvasHeight"></canvas></div>
+</div>

src/app/system-management/plotting-image/plotting-image.component.scss

@@ -0,0 +1,8 @@
+.content{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+.center{ width: 100%; height: 100%; }

src/app/system-management/plotting-image/plotting-image.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-plotting-image',
+  templateUrl: './plotting-image.component.html',
+  styleUrls: ['./plotting-image.component.scss']
+})
+export class PlottingImageComponent implements OnInit {
+
+  constructor() { }
+
+  canvasWidth: number = 0;
+  canvasHeight: number = 0;
+
+  ngOnInit(): void {
+    window.onload = () => {
+      this.initBackgroundImg()
+    }
+  }
+
+  //初始化背景图
+  initBackgroundImg() {
+    let canvas = document.getElementById('canvas') as any;
+    canvas.oncontextmenu = () =>{ return false; };
+    let ctx
+		// 检测canvas支持性
+		if (canvas.getContext) {
+			ctx = canvas.getContext('2d');	// 返回一个对象，该对象提供了用在画布上绘图的方法和属性
+		} else {
+			document.write("你的浏览器不支持canvas,请升级你的浏览器!");
+			return;
+		}
+
+		// 读取可视区域 宽高
+    let center = (document.getElementById('center') as any).getBoundingClientRect();
+
+    // 图片加载完后，将其显示在canvas中
+    var img = new Image();
+    img.src = "../../../assets/images/bgImg.png";
+    img.onload = () => {
+      // 等比例缩放图片
+      var scale = 1;
+      if (img.width > center.width || img.height > center.height) {
+        if (img.width > img.height) {
+          scale = center.width / img.width;
+        }else {
+          scale = center.height / img.height;
+        }
+      }
+      this.canvasWidth = img.width * scale;
+      this.canvasHeight = img.height * scale; // 计算等比缩小后图片
+      window.setTimeout(()=>{ // 加载图片
+        ctx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);
+      }, 0)
+    }
+  }
+
+}

src/app/system-management/system-management-routing.module.ts

@@ -3,12 +3,14 @@ import { NgModule } from '@angular/core';
 import { OrganizationComponent } from './organization/organization.component';
 import { AnalysisOfTheHostComponent } from './analysis-of-the-host/analysis-of-the-host.component';
 import { HostConfigComponent } from './host-config/host-config.component';
+import { PlottingImageComponent } from './plotting-image/plotting-image.component';
 
 
 const routes: Routes = [
     { path: 'organization', component: OrganizationComponent },
     { path: 'host', component: AnalysisOfTheHostComponent },
     { path: 'host/camera', component: HostConfigComponent },
+    { path: 'plottingImage', component: PlottingImageComponent },
 ];
 
 @NgModule({

src/app/system-management/system-management.module.ts

@@ -28,8 +28,9 @@ import { AddcameraComponent } from './host-config/addcamera/addcamera.component'
 import { EditcameraComponent } from './host-config/editcamera/editcamera.component';
 import { HostConfigComponent } from './host-config/host-config.component';
 import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
+import { PlottingImageComponent } from './plotting-image/plotting-image.component';
 @NgModule({
-  declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent],
+  declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, PlottingImageComponent],
   imports: [
     CommonModule,
     SystemRoutingModule,