将SVG转换为图像(JPEG、PNG等)在浏览器中

Question

将SVG转换为图像(JPEG、PNG等)在浏览器中

我想将SVG转换成位图图像(如JPEG、PNG等)通过JavaScript。

Answer 1

Jbeard 4解决方案效果很好。我在用拉斐尔草图来创建一个SVG。链接到步骤1中的文件。对于保存按钮(SVG的id是“编辑器”，画布的id是“画布”)：$("#editor_save").click(function() {// the canvg call that takes the svg xml and converts it to a canvascanvg('canvas', $("#editor").html()); // the canvas calls to output a pngvar canvas = document.getElementById("canvas");var img = canvas.toDataURL("image/png"); // do what you want with the base64, write to screen, post to server, etc...});

Answer 2

这似乎适用于大多数浏览器：function&nbsp;copyStylesInline(destinationNode,&nbsp;sourceNode)&nbsp;{ &nbsp;&nbsp;&nbsp;var&nbsp;containerElements&nbsp;=&nbsp;["svg","g"]; &nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;cd&nbsp;=&nbsp;0;&nbsp;cd&nbsp;<&nbsp;destinationNode.childNodes.length;&nbsp;cd++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;child&nbsp;=&nbsp;destinationNode.childNodes[cd]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(containerElements.indexOf(child.tagName)&nbsp;!=&nbsp;-1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyStylesInline(child,&nbsp;sourceNode.childNodes[cd]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;style&nbsp;=&nbsp;sourceNode.childNodes[cd].currentStyle&nbsp;||&nbsp;window.getComputedStyle(sourceNode.childNodes[cd]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(style&nbsp;==&nbsp;"undefined"&nbsp;||&nbsp;style&nbsp;==&nbsp;null)&nbsp;continue; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;st&nbsp;=&nbsp;0;&nbsp;st&nbsp;<&nbsp;style.length;&nbsp;st++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;child.style.setProperty(style[st],&nbsp;style.getPropertyValue(style[st])); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;}}function&nbsp;triggerDownload&nbsp;(imgURI,&nbsp;fileName)&nbsp;{ &nbsp;&nbsp;var&nbsp;evt&nbsp;=&nbsp;new&nbsp;MouseEvent("click",&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;view:&nbsp;window, &nbsp;&nbsp;&nbsp;&nbsp;bubbles:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;cancelable:&nbsp;true &nbsp;&nbsp;}); &nbsp;&nbsp;var&nbsp;a&nbsp;=&nbsp;document.createElement("a"); &nbsp;&nbsp;a.setAttribute("download",&nbsp;fileName); &nbsp;&nbsp;a.setAttribute("href",&nbsp;imgURI); &nbsp;&nbsp;a.setAttribute("target",&nbsp;'_blank'); &nbsp;&nbsp;a.dispatchEvent(evt);}function&nbsp;downloadSvg(svg,&nbsp;fileName)&nbsp;{ &nbsp;&nbsp;var&nbsp;copy&nbsp;=&nbsp;svg.cloneNode(true); &nbsp;&nbsp;copyStylesInline(copy,&nbsp;svg); &nbsp;&nbsp;var&nbsp;canvas&nbsp;=&nbsp;document.createElement("canvas"); &nbsp;&nbsp;var&nbsp;bbox&nbsp;=&nbsp;svg.getBBox(); &nbsp;&nbsp;canvas.width&nbsp;=&nbsp;bbox.width; &nbsp;&nbsp;canvas.height&nbsp;=&nbsp;bbox.height; &nbsp;&nbsp;var&nbsp;ctx&nbsp;=&nbsp;canvas.getContext("2d"); &nbsp;&nbsp;ctx.clearRect(0,&nbsp;0,&nbsp;bbox.width,&nbsp;bbox.height); &nbsp;&nbsp;var&nbsp;data&nbsp;=&nbsp;(new&nbsp;XMLSerializer()).serializeToString(copy); &nbsp;&nbsp;var&nbsp;DOMURL&nbsp;=&nbsp;window.URL&nbsp;||&nbsp;window.webkitURL&nbsp;||&nbsp;window; &nbsp;&nbsp;var&nbsp;img&nbsp;=&nbsp;new&nbsp;Image(); &nbsp;&nbsp;var&nbsp;svgBlob&nbsp;=&nbsp;new&nbsp;Blob([data],&nbsp;{type:&nbsp;"image/svg+xml;charset=utf-8"}); &nbsp;&nbsp;var&nbsp;url&nbsp;=&nbsp;DOMURL.createObjectURL(svgBlob); &nbsp;&nbsp;img.onload&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;ctx.drawImage(img,&nbsp;0,&nbsp;0); &nbsp;&nbsp;&nbsp;&nbsp;DOMURL.revokeObjectURL(url); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(typeof&nbsp;navigator&nbsp;!==&nbsp;"undefined"&nbsp;&&&nbsp;navigator.msSaveOrOpenBlob) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;blob&nbsp;=&nbsp;canvas.msToBlob();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.msSaveOrOpenBlob(blob,&nbsp;fileName); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgURI&nbsp;=&nbsp;canvas&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.toDataURL("image/png") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.replace("image/png",&nbsp;"image/octet-stream"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;triggerDownload(imgURI,&nbsp;fileName); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;document.removeChild(canvas); &nbsp;&nbsp;}; &nbsp;&nbsp;img.src&nbsp;=&nbsp;url;}