好吧，我需要一些关于将 .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/ ...感谢阅读/帮助
最佳答案
对于内联 SVG，您需要:
- 将 SVG 字符串转换为
Blob - 获取 Blob 的 URL
- 创建一个图像元素并将 URL 设置为
src - 加载 (
onload) 时，您可以将 SVG 绘制为 Canvas 上的图像 - 使用
toDataURL()从 Canvas 获取 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 设置 Canvas 大小。
关于javascript - 如何将内联 svg(在 DOM 中)绘制到 Canvas 上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27230293/