javascript中svg转png(亲测)

JavaScript和SVG是现代Web开发中非常重要的两个技术。在许多场景下，开发人员需要将SVG图像转换为PNG格式，以便在网站中使用或与其他应用程序共享。这种转换可以使用JavaScript轻松完成，本文将介绍如何在JavaScript中将SVG转换为PNG。

SVG是可缩放矢量图形的缩写，它是一种XML格式的图像文件，可以在不失真的情况下放大或缩小。PNG是一种常见的位图图像格式，适用于大多数Web开发场景。将SVG转换为PNG可以使它们与其他图像格式兼容，并且可以更容易地在网站中使用。

接下来，我们需要准备要转换的SVG文件。可以使用任何SVG编辑器创建或编辑SVG文件。在此示例中，我们将使用以下SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="#f00"/>
  <circle cx="50" cy="50" r="40" fill="#fff"/>
</svg>

该SVG文件包含一个红色的矩形和一个白色的圆形。我们将使用JavaScript将其转换为PNG格式。

下面是使用JavaScript将SVG转换为PNG的代码示例：

var svgNode = document.querySelector('.tool-qrcode svg');
const svgData = new XMLSerializer().serializeToString(svgNode)
const svgDataBase64 = btoa(unescape(encodeURIComponent(svgData)))

const svgDataUrl = `data:image/svg+xml;charset=utf-8;base64,${svgDataBase64}`

const img = new Image();
img.src = svgDataUrl;
img.onload = function() {
  const width = svgNode.getAttribute('width');
  const height = svgNode.getAttribute('height');
  const canvas = document.createElement('canvas');
  canvas.setAttribute('width', width)
  canvas.setAttribute('height', height)

  const context = canvas.getContext('2d')
  context.drawImage(img, 0, 0, width, height)

  var aLink = document.createElement('a');
  aLink.style.display = "none";
  aLink.href = canvas.toDataURL('image/png', 1.0);
  aLink.download = "qrcode" + ("-" + new Date().getTime()).substr(-4, 4); 
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);
}

代码中使用了Canvas API，它是一个用于在Web上绘制2D图形的API。我们使用createCanvas函数创建一个100×100像素的画布，并将SVG文件转换为Canvas对象。然后，我们将Canvas对象转换为图像对象，并将其绘制到画布上。最后，我们将画布转换为PNG格式，并将其写入磁盘。

在本文中，我们介绍了如何在JavaScript中将SVG转换为PNG。在网上查了很多资料或多或少的都存在问题，没有一个完整实现，这里记录下。