时间戳

首页 > 解决方案 > 无法以角度从资产文件夹加载图像

javascript - 无法以角度从资产文件夹加载图像

问题描述

我有一个大问题。我无法从资产文件夹以角度将图像加载到画布上。

html代码

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 canvas-viewer">
            <canvas width="240" height="297" style="border:1px solid #d3d3d3;" id="crfCanvas" #crfCanvas></canvas>
        </div>
        <div class="col-md-4 canvas-anno">

        </div>
    </div>
</div>

component.ts 代码

export class CanvasComponent implements OnInit {

  @ViewChild("crfCanvas", { static: true }) crfCanvas: ElementRef;
  constructor() { }

  ngOnInit() {
    let canvas = this.crfCanvas.nativeElement;
    let ctx = canvas.getContext("2d");
    let img = new Image();
    img.src = "../../assets/aCRF-PRV111_CLN-001 v1.4-images/aCRF-PRV111_CLN-001 v1.4-blank_0.jpg";
    ctx.drawImage(img, 10, 10, 250, 250);
  }

}

标签： javascripthtmlangular

解决方案

有几点需要考虑：

  1. ViewChild 绑定到视图，因此最好等待视图完成初始化（使用 ngAfterViewInit 钩子），但 ngOnInit 也可以工作（只是如果您将来需要考虑偏移等以绘制到画布中，它可能会咬你:)

  2. 图像加载是一个异步任务，您需要在尝试绘制图像之前利用 onload 钩子

  3. 使用“/assets/..”网址来避免问题

更新代码：

export class CanvasComponent implements OnInit {

  @ViewChild("crfCanvas", { static: true }) crfCanvas: ElementRef;

  constructor() { }

  ngAfterViewInit() {
    let canvas = this.crfCanvas.nativeElement;
    let ctx = canvas.getContext("2d");
    let img = new Image();
    img.src = "/assets/aCRF-PRV111_CLN-001 v1.4-images/aCRF-PRV111_CLN-001 v1.4-blank_0.jpg";
    img.onload = () => {
        ctx.drawImage(img, 10, 10, 250, 250);
    }
  }

}

Stackblitz：https ://stackblitz.com/edit/angular-v5tqbn

推荐阅读