在 JavaScript 中将 SVG 转换为 PNG答案

【问题标题】：SVG to PNG in javascript在 JavaScript 中将 SVG 转换为 PNG
【发布时间】：2020-02-21 17:00:24
【问题描述】：

我在将 svg 转换为 png(base64) 时遇到问题。 SVG 到 base64 可以正常工作，因为它在浏览器中显示得很好。但是当我尝试加载图像时，它不会加载。有人可能知道为什么？

  var xml = new XMLSerializer().serializeToString(svg);
  var svg64 = btoa(xml);
  var b64start = 'data:image/svg+xml;base64,';
  var image64 = b64start + svg64;
  console.log(image64);

  const img = new Image();

  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    const dataBase64 = canvas.toDataURL('image/png');
    console.log(dataBase64);

    generatePowerpoint(response, dataBase64);
  }
  img.onerror = function() {
    console.log(this.src);

  }
  img.src = image64;

【问题讨论】：

如果图像还没有附加到 DOM，它是否具有宽度和高度？请改用naturalWidth 和naturalHeight。
我不想将它附加到 dom，而是将它的 base64 获取到我的 powerpoint builder

标签： javascript svg canvas png

【解决方案1】：

这取决于您使用的浏览器。使用 Firefox，svg 标签必须有 width 和 height 属性（单位不是 %）。

这也取决于 svg 的内容。如果 svg 包含非拉丁字符，btoa 可能会失败（即使这似乎不是问题，因为 Svg 到 base64 在您的情况下可以正常工作）。

【讨论】：