通过 Canvas 下载 SVG 到 PNG 时如何避免黑色或空白图像？

Question

我正在尝试使用 Canvas 将 SVG 图像下载为 PNG。

我使用的流程如下：

1. 获取 SVG HTML；
2. 将 SVG 转换为 Canvas；
3. 下载 PNG 画布。

这是我的代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = document.getElementById("mySvg");
var elementWidth = data.clientWidth || data.parentNode.clientWidth;
var elementHeight = data.clientHeight || data.parentNode.clientHeight;
var DOMURL = window.URL || window.webkitURL || window;
var aLines = document.createElement("a");
var img = new Image();
var svg = new Blob([data.outerHTML], {
  type: 'image/svg+xml'
});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

aLines.href = canvas.toDataURL();
aLines.download = "test.png";

aLines.click();

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas -->

<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>
<svg id="mySvg" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">
      <em>I</em> like
      <span style="color:white; text-shadow:0 0 2px blue;">
             cheese</span>
    </div>
  </foreignObject>
</svg>

当我执行该代码时，我得到的是黑色图像，而不是包含 SVG 内容的图像。

我尝试将 Canvas 背景更改为白色，但随后我得到一个空白图像，并且没有 SVG 内容。

您有什么建议来解决这个问题，或者您能给我指出正确的方向吗？

谢谢。

Answer 1

我遇到了同样的问题，并且我的代码与您的类似。但是，当我修改为以下内容时，它对我有用：

const saveSvgAsPng = (svgElt, imageName) => {
    const xml = new XMLSerializer().serializeToString(svgElt);
    const svg64 = btoa(xml);
    const b64Start = 'data:image/svg+xml;base64,';
    const { width, height } = svgElt.getBoundingClientRect();

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    ctx.fillStyle = 'white'; // background color for the canvas
    ctx.fillRect(0, 0, width, height); // fill the color on the canvas

    const image = new Image();
    image.onload = () => {
        ctx.drawImage(image, 0, 0, width, height);

        downloadImage(canvas, imageName); // download the image when the image has been loaded onto the canvas
    };
    image.src = b64Start + svg64;
};

const downloadImage = (canvas, imageName) => {
    canvas.toBlob((blob) => {
        const anchor = document.createElement('a');
        anchor.download = imageName;
        anchor.href = URL.createObjectURL(blob);

        anchor.click(); 

        URL.revokeObjectURL(anchor.href); // remove it from memory and save on memory!
    }, 'image/png');
};

您可以将 SVG 元素data与图像名称一起传递给函数。就我而言，我创建了一个新画布，但如果您修改该函数以使用现有画布，该函数仍然可以工作。

参考： https: //www.digitalocean.com/community/tutorials/js-canvas-toblob