如何使用html5 canvas / javascript / jquery将svg转换为png并保存在服务器上
那么，我需要一些关于转换.svg文件/图像到.png文件/图像的帮助…
我有一个.svg图像显示在我的网页上。 它保存在我的服务器上（作为.png文件）。 我需要将其转换为.png文件（点击button）并将.png文件保存在服务器上（我将使用.ajax请求来完成此操作）。
但问题是转换。
我读了很多关于html5 Canvas的东西，这可能有助于做我现在需要做的事情，但我找不到任何明确的解决scheme，而且，我不明白我发现的一切…所以我需要一些明确的build议/帮助，我必须这样做。
这里是“html的想法”模板：
<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文件中…但是…怎么样？ 我读了很多不同的解决scheme，我其实…失去了…我正在一个jsfiddle，但我其实…无处… http://jsfiddle.net/xfh7nctk/6 / …感谢阅读/帮助
对于内联SVG，您需要：
- 将SVGstring转换为
Blob - 获取Blob的URL
- 创build一个图像元素，并将URL设置为
src - 当加载（
onload）时，您可以在canvas上将SVG绘制为图像 - 使用
toDataURL()从canvas上获取PNG文件。
例如：
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就是例子。 在这里存储/传输string。 （我也build议在该方法内添加一个onerror处理程序）。
还要记得使用width和height属性来设置canvas大小，或者使用JavaScript属性来设置canvas大小。
更新小提琴
因为接受的答案可能会产生不良的行为，所以我从这个问题中提出了一些其他的问题。
@ K3N的解决scheme几乎是正确的，但我会反对使用svgElement.outerHTML 。
相反，应该更喜欢new 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())})
