介绍
canvg-origin 是一个基于 JavaScript 的矢量图库，它可以将 SVG 格式的图形转换为 Canvas 格式，从而可以在网页中进行渲染。这个库可以用于在前端开发中制作动态的数据可视化图表、网络拓扑图等。
安装
可以使用 npm 安装 canvg-origin 包。
npm install canvg-origin --save
使用
canvg-origin 提供了两个主要的 API，其中一个是将 SVG 转化为 Canvas 的 API，另外一个是将 Canvas 转化为 DataURL 的 API。
SVG 转化为 Canvas
可以使用如下代码将 SVG 转化为 Canvas。
-- -------------------- ---- ------- ------ ----- ---- -------------- ----- --- - ----- ---------------------------------- ----------- ------------ ---------- - --- ----- ----- ------ ------ ----------- ------------ --------------------- ------- ----- ------ - -------------------------------- ------------ - --- ------------- - --- ----- --- - ----------------------- ---------- ---- ---------------------------------
这段代码中，我们首先将 SVG 字符串赋值给了 svg 变量，然后创建一个 Canvas 元素并获取 2D 上下文对象。接着使用 canvg(origin) 将 SVG 转化为 Canvas 格式，最后将 Canvas 元素插入到网页中。
Canvas 转化为 DataURL
可以使用如下代码将 Canvas 转化为 DataURL。
const url = canvas.toDataURL() console.log(url)
示例
我们可以使用 canvg-origin 创建一个简单的柱状图的示例。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ----------
-------
------
------- ---------------------
------- ----------------------------------------------------------
--------
----- ---- - -
- ------ ---- ------ -- --
- ------ ---- ------ -- --
- ------ ---- ------ -- --
- ------ ---- ------ -- -
-
----- ------ - ---------------------------------
----- --- - -----------------------
----- ----- - ------------
----- ------ - -------------
----- ------- - --
----- -------- - ------ - ------- - -- - ----------- - --
----- -------- - ---------------------- -- ---------
------------- - ------
--------------- -- ------ -------
---------------- -- -- -
----- - - ------- - - - --------- - --- - -
----- - - ------ - ------- - ------- - -------- - ------- - ------- - --
----- --------- - ------ - ------- - -
------------- - ---------
--------------- -- --------- ----------
------------- - ------
-------- - ----- ------
------------- - --------
--------------------- - - -------- - -- ------ - ------- - --
--
----- --- - ----- ---------------------------------- ---------------- ------------------ ---------- - -------- -----------
----- ----- ----- ---------------- ------------------ -------------
-------------- -- -- -
----- - - ------- - - - --------- - --- - -
----- - - ------ - ------- - ------- - -------- - ------- - ------- - --
----- --------- - ------ - ------- - -
------ ------ -------- -------- ------------------- --------------------- -------------- --
----- ------ - -------- - --- ----------- - ------- - --- ---------------- ------------------- ----------- ---------------------------------------
------------
-------
----- --------- - --------------------------------
--------------- - -----
---------------- - ------
--------------------------------- ----
----- --- - ---------------------
----------------
---------
-------
-------这段代码中，我们首先定义了一个柱状图的数据 data，包含四个条目。接着创建 Canvas 并获取 2D 上下文对象，定义柱状图的宽度、高度、填充和条形图宽度等参数。然后进行柱状图的绘制，绘制过程中计算每个条目所占的位置和高度，然后填充相应的颜色并绘制标签文字。最后将 SVG 字符串和 Canvas 元素插入到网页中，并将 SVG 转化为 DataURL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c93ccdc64669dde5afe