SVG 到 javascript 中的 PNG

Question

我在將 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;

Answer 1

這取決於您使用的瀏覽器。 使用 Firefox，svg 標簽必須具有寬度和高度屬性（單位不是 %）。

它還取決於 svg 的內容。 如果 svg 包含非拉丁字符，btoa 可能會失敗（即使這似乎不是問題，因為 Svg 到 base64 在您的情況下工作正常）。