我正在尝试使用Canvas将SVG图像下载为PNG。
我的具体步骤如下:
- 获取SVG HTML;
- 将SVG转换为Canvas;
- 将Canvas下载为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内容。
你有什么建议来解决这个问题或者可以指点我正确的方向吗?
谢谢。