将Canvg3.0与集成

Question

在我目前开发的应用程序中，我使用画布库在页面中进行一些画布渲染，直到现在我使用画布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发布了，它将所有内容都更改为类型记录，并且canvg.min.js不再存在，而且我无法找到一种方法将已安装的npm拉力场库集成到我的角8项目中，这样我就可以像以前一样使用它，对于导入" canvg“功能的任何模块没有任何建议，而且这些文档也无助于如何将它与角集成。

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

Answer 1

实际上，如果他们迁移到TypeScript，就更容易了。他们在这里中给出了一些文档。

下面是一个让你开始的例子：

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>

这是供您参考的示例代码示例。

Answer 2

您可以在调用import * as canvg from 'canvg'之后使用npm install canvg --save导入画布