JavaScript实现SVG转图片 - 附详细代码示例

JavaScript实现SVG转图片

想要使用JavaScript将SVG转换为图片？您可以利用Canvas API轻松实现！

以下是将SVG转换为PNG格式图片的示例代码：

// 创建一个空的Canvas元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// 将SVG代码加载到一个新创建的Image元素中
var img = new Image();
img.onload = function() {
  // 将SVG绘制到Canvas中
  ctx.drawImage(img, 0, 0);

  // 将Canvas转换为图片
  var dataURL = canvas.toDataURL('image/png');
  
  // 创建一个新的图片元素，并将转换后的图片数据赋值给它
  var imgElement = document.createElement('img');
  imgElement.src = dataURL;

  // 将图片元素添加到DOM中
  document.body.appendChild(imgElement);
};

// 设置Image元素的src属性为SVG文件的URL
img.src = 'path/to/your/svg/file.svg';

代码解析：

1. 创建一个Canvas元素和一个2D渲染上下文。
2. 创建一个新的Image元素，并将SVG文件加载到其中。
3. 监听Image元素的'load'事件，当图片加载完成后，将SVG绘制到Canvas上。
4. 使用canvas.toDataURL('image/png')将Canvas转换为PNG格式的图片数据URL。
5. 创建一个新的Image元素，并将图片数据URL赋值给它的src属性。
6. 将新的Image元素添加到DOM中。

转换为其他图片格式:

如果需要将SVG转换为其他格式的图片，例如JPEG，只需将toDataURL方法的第一个参数修改为对应的格式即可，例如：

var dataURL = canvas.toDataURL('image/jpeg');