如何使用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处理程序)。

还要记得使用widthheight属性来设置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())})