Question

我尝试使用Canvas将SVG图像下载到PNG。

我使用的流程如下：

获取SVG HTML;
将SVG转换为Canvas;
将画布下载为PNG。

这是我的代码：

＆＃13;

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();

＆＃13;

<!-- 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>

＆＃13;

当我执行该代码时，我没有获得带有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

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

1 个答案: