嗯，我需要一些有关将 .svg 文件/图像转换为 .png 文件/图像的帮助...
我的页面上显示了 .svg 图像。它保存在我的服务器上（作为 .png 文件）。我需要根据需要将其转换为 .png 文件（单击按钮）并将 .png 文件保存在服务器上（我将使用 .ajax 请求来完成此操作）。
但问题是转换。
我读了很多关于 html5 Canvas 的东西，这可能有助于做我现在需要做的事情，但我找不到任何明确的解决方案来解决我的问题，而且，说实话，我不明白我发现的一切......所以我需要一些关于我必须采取的方式的明确建议/帮助。
这是“html idea”模板：
<html>
<body>
<svg id="mySvg" width="300px" height="300px">
<!-- my svg data -->
</svg>
<label id="button">Click to convert</label>
<canvas id="myCanvas"></canvas>
</body>
</html>
还有一些js：
<script>
$("body").on("click","#button",function(){
var svgText = $("#myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
});
</script>
然后，我需要将 svg 绘制到 Canvas 中，取回 Base64 数据，并将其保存在我的服务器上的 .png 文件中......但是......如何？我读到了很多不同的解决方案，我实际上...迷失了...我正在研究 jsfiddle，但我实际上...无处... http://jsfiddle.net/xfh7nctk/ 6/ ...感谢您的阅读/帮助
对于内联 SVG，您需要：
BlobsrconloadtoDataURL()例如：
function drawInlineSVG(ctx, rawSVG, callback) {
var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
domURL = self.URL || self.webkitURL || self,
url = domURL.createObjectURL(svg),
img = new Image;
img.onload = function () {
ctx.drawImage(this, 0, 0);
domURL.revokeObjectURL(url);
callback(this);
};
img.src = url;
}
// usage:
drawInlineSVG(ctxt, svgText, function() {
console.log(canvas.toDataURL()); // -> PNG data-uri
});
当然，这里的console.log只是举例。在这里存储/传输字符串。 （我还建议在方法内添加一个
onerror另请记住使用
widthheight自从这个问题提出其他一些问题后我就来了很长时间，因为接受的答案可能会产生不良行为。
@K3N 解决方案几乎是正确的，但我反对使用
svgElement.outerHTMLnew XMLSerializer().serializeToString(svgElement)此外，没有必要使用 blob 和 URL API，简单的 dataURI 具有更好的跨浏览器兼容性。
所以完整的版本是：
function drawInlineSVG(svgElement, ctx, callback) {
var svgURL = new XMLSerializer().serializeToString(svgElement);
var img = new Image();
img.onload = function() {
ctx.drawImage(this, 0, 0);
callback();
}
img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
}
// usage:
drawInlineSVG(document.querySelector('svg'), ctxt, function() {
console.log(canvas.toDataURL())
});
这样做很诱人...
let B=new Blob([mySvg.outerHTML],{type:'image/svg+xml'});
let Url=URL.createObjectURL(B);
但是画布可能无法获取 svg 的自然高度和宽度，因此我们必须将 url 格式化为数据 URI...
let Url='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(mySvg.outerHTML);
现在我们可以出发了...
let I=new Image();
I.crossOrigin='anonymous';
I.src=Url;
I.onload=function(){
myCanvas.width=this.naturalWidth; myCanvas.height=this.naturalHeight;
myCanvas_Context.drawImage(this,0,0,myCanvas.width,myCanvas.height);
};