好吧，我需要一些有关将.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 回答
三国纷争
TA贡献1804条经验 获得超7个赞
对于嵌入式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
TA贡献1887条经验 获得超5个赞
我很久以后才提出这个问题，因为接受的答案可能会产生不良行为。
@ 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())})
长风秋雁
TA贡献1757条经验 获得超7个赞
这不是CORS问题。一些UA在画布上绘制某些svg元素时具有安全限制。这在哪个浏览器上发生？如果IE <Edge，则所有svg都会污染画布。唯一的解决方法：使用画布绘制方法重现svg（这是canvg之类的库所执行的操作）。对于其他UA，您的svg中可能有一个foreignObject元素。不幸的是，Safari和chrome在某些情况下并不真正喜欢它，除了删除此元素或将其替换为ots内容上的html2canvas结果之外，没有其他解决方法。
添加回答
举报
0/150
提交
取消