JavaScript 将 SVG 转为图片 - 实用代码示例 - 常规

使用 JavaScript 将 SVG 转为图片

在网页开发中，你可能会遇到需要将 SVG 图像转换为其他图片格式的情况，例如 PNG 或 JPEG。

本教程将教你如何使用 JavaScript 和 <canvas> 元素将 SVG 转换为图片。

代码示例

以下代码演示了如何将 SVG 转换为 PNG 格式的图片，并将其显示在页面上：

// 创建一个新的 Image 对象
var img = new Image();

// 获取 SVG 元素
var svg = document.querySelector('svg');

// 创建一个新的 Blob 对象，将 SVG 代码作为数据
var svgData = new XMLSerializer().serializeToString(svg);
var blob = new Blob([svgData], {type: 'image/svg+xml'});

// 创建一个 URL 对象，指向 Blob 对象
var url = URL.createObjectURL(blob);

// 当图片加载完成时
img.onload = function() {
  // 创建一个新的 <canvas> 元素
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;

  // 将图片绘制到 <canvas> 上
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  // 将 <canvas> 转换为图片
  var dataUrl = canvas.toDataURL('image/png');

  // 显示图片
  var imgElement = document.createElement('img');
  imgElement.src = dataUrl;
  document.body.appendChild(imgElement);

  // 释放 URL 对象
  URL.revokeObjectURL(url);
};

// 设置图片的 src 属性为 URL 对象
img.src = url;

代码解释

获取 SVG 元素: 使用 document.querySelector('svg') 选择需要转换的 SVG 元素。
创建 Blob 对象: 使用 XMLSerializer 将 SVG 代码序列化为字符串，然后创建包含该字符串的 Blob 对象。
创建 URL 对象: 使用 URL.createObjectURL() 创建指向 Blob 对象的 URL。
创建 Image 对象: 创建一个新的 Image 对象，并将它的 src 属性设置为创建的 URL。
监听图片加载完成事件: 当 Image 对象加载完成后，执行以下步骤：
- 创建一个新的 <canvas> 元素，并设置其宽度和高度与 SVG 图像相同。
- 获取 <canvas> 的 2D 上下文，并将 Image 对象绘制到 <canvas> 上。
- 使用 canvas.toDataURL() 方法将 <canvas> 转换为 Data URL，指定图片格式为 'image/png'。
- 创建一个新的 <img> 元素，并将其 src 属性设置为 Data URL，从而在页面上显示转换后的图片。
- 使用 URL.revokeObjectURL() 释放创建的 URL 对象。

注意事项

将代码中的 'svg' 选择器替换为你实际使用的 SVG 元素选择器。
可以将 canvas.toDataURL() 方法的第二个参数更改为其他图片格式，例如 'image/jpeg'。

希望本教程能够帮助你使用 JavaScript 将 SVG 转换为图片！