将 Canvg 3.0 与 Angular 项目集成

Question

在我目前开发的应用程序中，我正在使用canvg库在页面中制作一些canvas效果图，直到现在我使用canvg 2.0库通过以下方式实现：

import Canvg from 'canvg/dist/browser/canvg.min.js';

// convert SVG into a XML string
xml = new XMLSerializer().serializeToString(obj);
// Removing the name space as IE throws an error
xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
// draw the SVG onto a canvas
Canvg(canvas, xml);

几天前发布了 Canvg 版本 3，它将所有内容更改为 Typescript，canvg.min.js 不再存在，我找不到将 npm 安装的 canvg 库集成到我的 Angular 中的方法8 项目所以我可以像以前一样使用它，没有关于为 "Canvg" 函数导入任何模块的建议，并且文档也没有帮助如何将它与 Angular.

集成

有没有人遇到过这个问题并且知道如何解决？

Answer 1

如果他们迁移到 TypeScript，实际上会更容易。他们在 here.

中提供了一些文档

这是一个让您入门的示例：

import { Component, ViewChild, AfterViewInit, OnDestroy } from "@angular/core";
import Canvg from "canvg";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild("canvas", { static: false }) canvas;
  context: CanvasRenderingContext2D;
  renderedCanvas;

  async ngAfterViewInit() {
    this.context = this.canvas.nativeElement.getContext("2d");
    this.renderedCanvas = await Canvg.from(
      this.context,
      '<svg width="600" height="600"><text x="50" y="50">Hello World!</text></svg>'
    );
    this.renderedCanvas.start();
  }

  ngOnDestroy() {
    this.renderedCanvas && this.renderedCanvas.stop();
  }
}

这是模板：

<canvas #canvas></canvas>

Here's the Sample Code Example for your ref.

Answer 2

您可以在调用 npm install canvg --save

后使用 import * as canvg from 'canvg' 导入 canvg

将 Canvg 3.0 与 Angular 项目集成

Integrating Canvg 3.0 with Angular project

canvg

angular