在浏览器中将SVG转换为图像（JPEG，PNG等）
我想通过JavaScript将SVG转换成位图图像（如JPEG，PNG等）。
这里是你如何通过JavaScript来做到这一点：
- 使用Canvg JavaScript库使用Canvas呈现SVG图像： https ： //github.com/gabelerner/canvg
- 从Canvas中捕获以JPG（或PNG）格式编码的数据URI，根据以下说明：将HTML Canvas捕获为gif / jpg / png / pdf？
jbeard4解决scheme工作得很好。
我正在使用Raphael SketchPad创build一个SVG。 链接到第1步中的文件。
对于Savebutton（svg的id是“editor”，canvas的id是“canvas”）：
$("#editor_save").click(function() { // the canvg call that takes the svg xml and converts it to a canvas canvg('canvas', $("#editor").html()); // the canvas calls to output a png var canvas = document.getElementById("canvas"); var img = canvas.toDataURL("image/png"); // do what you want with the base64, write to screen, post to server, etc... });
这是基于PhantomJS的服务器端解决scheme。 您可以使用JSONP对图像服务进行跨域调用：
https://github.com/vidalab/banquo-server
例如：
HTTP：// [主机] /api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas
然后你可以用img标签显示图像：
<img src="data:image/png;base64, [base64 data]"/>
它跨浏览器工作。
这似乎在大多数浏览器中工作：
function copyStylesInline(destinationNode, sourceNode) { var containerElements = ["svg","g"]; for (var cd = 0; cd < destinationNode.childNodes.length; cd++) { var child = destinationNode.childNodes[cd]; if (containerElements.indexOf(child.tagName) != -1) { copyStylesInline(child, sourceNode.childNodes[cd]); continue; } var style = sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd]); if (style == "undefined" || style == null) continue; for (var st = 0; st < style.length; st++){ child.style.setProperty(style[st], style.getPropertyValue(style[st])); } } } function triggerDownload (imgURI, fileName) { var evt = new MouseEvent("click", { view: window, bubbles: false, cancelable: true }); var a = document.createElement("a"); a.setAttribute("download", fileName); a.setAttribute("href", imgURI); a.setAttribute("target", '_blank'); a.dispatchEvent(evt); } function downloadSvg(svg, fileName) { var copy = svg.cloneNode(true); copyStylesInline(copy, svg); var canvas = document.createElement("canvas"); var bbox = svg.getBBox(); canvas.width = bbox.width; canvas.height = bbox.height; var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, bbox.width, bbox.height); var data = (new XMLSerializer()).serializeToString(copy); var DOMURL = window.URL || window.webkitURL || window; var img = new Image(); var svgBlob = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); var url = DOMURL.createObjectURL(svgBlob); img.onload = function () { ctx.drawImage(img, 0, 0); DOMURL.revokeObjectURL(url); if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) { var blob = canvas.msToBlob(); navigator.msSaveOrOpenBlob(blob, fileName); } else { var imgURI = canvas .toDataURL("image/png") .replace("image/png", "image/octet-stream"); triggerDownload(imgURI, fileName); } document.removeChild(canvas); }; img.src = url; }
如果你不是以编程的方式，这个问题应该可能属于superuser.com。
无论哪种方式， 蜡染SVG工具包可能会有所帮助，尤其是SVG光栅化器 。
