使用 JavaScript 将 SVG 转换为 PNG
本教程教你如何在 Web 浏览器中将 SVG 转换为 PNG 图像。我们将使用的方法涉及使用 Canvg 并使用 toDataURL 方法将 Canvas 的内容保存为 PNG 图像。
在 JavaScript 中使用 Canvg 将 SVG 字符串转换为图像
Canvg 是一个开源的 JavaScript 解析器和渲染器，可以将 SVG 转换为 Web 浏览器中的图像。SVG 可以是字符串格式或来自 DOM 元素。
在这里，我们将向你展示如何将 SVG 字符串转换为图像。
要开始使用 Canvg，安装像 XAMPP 这样的本地服务器 因为浏览器中的 Canvg 使用 ES 模块。然后，访问官方 Canvg GitHub 存储库 并选择你喜欢的下载选项。
同时，我们将选择允许你在网络浏览器中使用 Canvg 的选项。
以下是在 Web 浏览器中使用 Canvg 将 SVG 字符串转换为 PNG 的步骤。
-
在你的服务器中为此项目创建一个文件夹。
-
从
Skypack CDN导入Canvg。 -
创建一个
Canvg初始化变量并将其值设置为NULL。 -
创建一个
onload函数。 -
在
onload函数中，执行以下操作：- 从你的 HTML 中选择 Canvas。
- 从 Canvas 中获取 2d context。
- 将
Canvg初始化变量的新值设置为Canvg的fromString方法。 - 将 SVG 代码读入
fromString方法。 - 调用初始化变量中可用的
start方法。 - 使用
toDataURL将图像转换为 PNG。 - 在屏幕上写入图像。
这段代码是上面详述的步骤的实现。
<body>
<canvas id="myCanvas"></canvas>
<script type="module">
// Import Canvg from the Skypack CDN
import { Canvg } from 'https://cdn.skypack.dev/canvg';
// Set an initialization variable to null
let v = null;
// Create a function that fires when the
// web browser loads the file
window.onload = () => {
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// Read the SVG string using the fromString method
// of Canvg
v = Canvg.fromString(ctx, '<svg height="200" width="300"><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:navy;stroke-width:5;fill-rule:nonzero;"/></svg>');
// Start drawing the SVG on the canvas
v.start();
// Convert the Canvas to an image
var img = canvas.toDataURL("img/png");
// Write the image on the screen
document.write('<img src="' + img + '"/>');
}
</script>
</body>
输出：
如果你右键单击它并选择在新标签页中打开图像，你可以确认它是一个图像。你会得到以下。
在 JavaScript 中使用 Canvg 将 SVG 文件转换为图像
如果你将 SVG 保存为文件，你会发现这种方法很有用。Canvg 允许你异步读取 SVG 文件，并且你可以将 SVG 作为图像写入屏幕。
以下是使用 Canvg 以 PNG 格式显示 SVG 文件的步骤。
-
在你的服务器中为此项目创建一个文件夹。
-
从
Skypack CDN导入Canvg。 -
创建一个
Canvg初始化变量并将其值设置为NULL。 -
创建一个异步
onload函数。 -
在
onload函数中，执行以下操作：- 从你的 HTML 中选择 Canvas。
- 从 Canvas 中获取 2d context。
- 将
Canvg初始化变量的新值设置为await运算符和Canvg的from方法。 - 将 SVG 文件读入
from方法。 - 调用初始化变量中可用的
start方法。 - 使用
toDataURL将图像转换为 PNG。 - 在屏幕上写下图像。
此代码是将 SVG 文件转换为 PNG 的实现。
<body>
<canvas id="myCanvas"></canvas>
<script type="module">
// Import Canvg from the Skypack CDN
import { Canvg } from 'https://cdn.skypack.dev/canvg';
// Set an initialization variable to null
let v = null;
// Create a function that fires when the
// web browser loads the file
window.onload = async () => {
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// Read the SVG file using the from method
// of Canvg
v = await Canvg.from(ctx, './cat.svg');
// Start drawing the SVG on the canvas
v.start();
// Convert the Canvas to an image
var img = canvas.toDataURL("img/png");
// Write the image on the screen
document.write('<img src="' + img + '"/>');
}
</script>
</body>
输出：
此外，你可以确认它是 PNG 图像。
在第二个示例中，我们使用了 cat SVG。你可以在 Freesvg 上下载 cat SVG。
相关文章
在 JavaScript 中跟踪鼠标位置
发布时间：2024/03/16 浏览次数：188 分类：JavaScript
-
在本教程中，我们将了解如何在 JavaScript 中使用鼠标事件跟踪鼠标位置。
在 JavaScript 中更改悬停图像
发布时间：2024/03/16 浏览次数：88 分类：JavaScript
-
在悬停时更改图像在 UI 上添加了一种很酷的氛围。此任务可以通过基本的 JavaScript 函数操作执行，也可以通过 jQuery 的 .hover() 函数执行。
在 JavaScript 中从 URL 加载图像
发布时间：2024/03/16 浏览次数：112 分类：JavaScript
-
在今天的文章中，我们将学习如何在 JavaScript 中从指定的 URL 加载图像。
使用 JavaScript 淡入图像
发布时间：2024/03/16 浏览次数：101 分类：JavaScript
-
可以借助某些方法和属性来淡入图像以制作具有视觉吸引力的 UI。requestAnimationFrame 方法和 className 属性是淡入图像的首选方式。
使用 HTML Canvas 在 JavaScript 中裁剪图像
发布时间：2024/03/16 浏览次数：100 分类：JavaScript
-
在本文中，我们将看到如何使用 HTML 5 canvas 元素在 JavaScript 中裁剪图像。
在 JavaScript 中使用 Onclick 重定向页面
发布时间：2024/03/16 浏览次数：78 分类：JavaScript
-
本教程将教你如何在用户单击 HTML 按钮时创建 JavaScript 重定向。我们将使用 onclick 函数来监听事件。如果用户单击该按钮，它将重定向到另一个页面。
JavaScript 布尔函数
发布时间：2023/09/09 浏览次数：104 分类：JavaScript
-
与大多数其他编程语言不同，JavaScript 拥有布尔类型作为原始数据类型。 布尔类型大多将 true 和 false 作为唯一的默认值。但在某些情况下，我们也将 0 表示为 false，将 1 表示为 true。
JavaScript boolean.constructor 属性
发布时间：2023/09/09 浏览次数：93 分类：JavaScript
-
在 JavaScript 中， boolean.constructor 属性返回创建此原型的函数。JavaScript boolean.constructor 属性的语法
