如何在画布上绘制内嵌svg（在DOM中）？
好吧，我需要一些有关将.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，但是实际上我...无处... http://jsfiddle.net/xfh7nctk/6 / ...感谢您的阅读/帮助
慕沐林林3回答
-
三国纷争
对于嵌入式SVG，您需要：将SVG字符串转换为 Blob获取Blob的URL创建图像元素并将URL设置为 src加载（onload）后，您可以将SVG绘制为画布上的图像用于toDataURL()从画布获取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仅作为示例。请在此处存储/传输字符串。（我也建议onerror在方法内部添加一个处理程序）。另外，请记住使用width和height属性设置画布大小，或者使用属性从JavaScript 设置画布大小。 -
慕工程0101907
我很久以后才提出这个问题，因为接受的答案可能会产生不良行为。@ K3N解决方案几乎是正确的，但我反对使用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())}) -
长风秋雁
这不是CORS问题。一些UA在画布上绘制某些svg元素时具有安全限制。这在哪个浏览器上发生？如果IE <Edge，则所有svg都会污染画布。唯一的解决方法：使用画布绘制方法重现svg（这是canvg之类的库所执行的操作）。对于其他UA，您的svg中可能有一个foreignObject元素。不幸的是，Safari和chrome在某些情况下并不真正喜欢它，除了删除此元素或将其替换为ots内容上的html2canvas结果之外，没有其他解决方法。
随时随地看视频慕课网APP
JavaScript
Html/CSS