好吧,我需要一些有关将.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,但是实际上我…无处…
…感谢您的阅读/帮助
对于嵌入式SVG,您需要:
Blob
src
onload
toDataURL()
例如:
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在方法内部添加一个处理程序)。
onerror
另外,请记住使用width和height属性来设置画布大小,或者使用属性从JavaScript中设置画布大小。
width
height