JS 将 SVG 转换为图片 - 详细教程与代码示例 - 常规

使用 JavaScript 将 SVG 转换为图片

在 Web 开发中，你可能会遇到需要将 SVG（可缩放矢量图形）转换为其他图片格式（如 PNG 或 JPEG）的情况。

幸运的是，JavaScript 提供了一种简单的方法来实现这一点，可以使用 <canvas> 元素将 SVG 转换为图片。

以下是实现此目标的步骤：

获取 SVG 代码： 将 SVG 代码插入到 HTML 文档中的 <svg> 元素中，或者通过其他方式获取 SVG 代码字符串。
创建 Canvas 元素： 创建一个 <canvas> 元素，并设置其宽度和高度与 SVG 图像的尺寸相同。
使用 Canvas 绘制 SVG： 使用 drawImage() 方法将 SVG 图像绘制到 Canvas 上下文中。
使用 toDataURL() 获取图片数据： 使用 canvas.toDataURL() 方法将 Canvas 内容转换为数据 URL，该 URL 包含表示图片数据的 Base64 编码字符串。
使用图片数据： 可以将数据 URL 设置为 <img> 元素的 src 属性以显示图片，或将其保存到服务器。

以下是一个将 SVG 转换为 PNG 图片的 JavaScript 代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>SVG 转 图片</title>
</head>
<body>
  <svg id='svg' width='200' height='200'>
    <circle cx='100' cy='100' r='50' fill='red' />
  </svg>

  <canvas id='canvas' width='200' height='200'></canvas>

  <script>
    const svg = document.getElementById('svg');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    const DOMURL = self.URL || self.webkitURL || self;
    const img = new Image();
    const svgBlob = new Blob([svg.outerHTML], {type: 'image/svg+xml;charset=utf-8'});
    const url = DOMURL.createObjectURL(svgBlob);

    img.onload = function() {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);

      const imgURI = canvas.toDataURL('image/png'); // 可以更改图片类型
      const imgElement = document.createElement('img');
      imgElement.src = imgURI;
      document.body.appendChild(imgElement);
    };

    img.src = url;
  </script>
</body>
</html>

在这个例子中：

我们首先获取对 SVG 元素和 Canvas 元素的引用。
然后，我们创建一个新的 Image 对象，并使用 SVG 数据创建一个 Blob 对象。
我们使用 createObjectURL() 方法创建一个指向 Blob 对象的临时 URL。
将图片的 src 属性设置为该 URL，并在图片加载完成后使用 drawImage() 方法将其绘制到 Canvas 上。
最后，我们使用 toDataURL() 方法获取图片的数据 URL，并创建一个新的 Image 元素，将其 src 属性设置为数据 URL，以便在页面上显示转换后的图片。

你可以根据需要调整代码，例如更改图片类型、大小和质量。