如何将内联 svg(在 DOM 中)绘制到画布上? [英] How to draw an inline svg (in DOM) to a canvas?
问题描述
嗯，我需要一些关于将 .svg 文件/图像转换为 .png 文件/图像的帮助...
Well, I need some help about convert .svg file/image to .png file/image...
我的页面上显示了 .svg 图像.它保存在我的服务器上(作为 .png 文件).我需要根据需要将其转换为 .png 文件(单击按钮)并将 .png 文件保存在服务器上(我将使用 .ajax 请求执行此操作).
I have a .svg image displayed on my page. It is saved on my server (as a .png file). I need to convert it to a .png file on demand (on click on a button) and save the .png file on the server (I will do this with an .ajax request).
但问题在于转换.
我阅读了很多关于 html5 Canvas 的内容，这可能有助于做我现在需要做的事情，但是我找不到任何明确的问题解决方案，而且，我不明白我发现的一切... 所以我需要一些明确的建议/帮助来说明我必须做的事情.
I read many things about the html5 Canvas, which can probably help doing what I need to do now, but I can't find any clear solution to my problem, and, tbh, I do not understand everything I found... So I need some clear advices/help about the way I have to do it.
这是html idea"模板:
Here is the "html idea" template :
<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/ ... 感谢阅读/帮助
Then, I need to draw the svg into the Canvas, get back the base64 data, and save it in a .png file on my server... but... how? I read about so many different solutions that I'm actually... lost... I'm working on a jsfiddle, but I'm actually... nowhere... http://jsfiddle.net/xfh7nctk/6/ ... Thanks for reading / help
推荐答案
对于内联 SVG，您需要:
For inline SVG you'll need to:
- 将 SVG 字符串转换为
Blob - 获取 Blob 的 URL
- 创建一个图像元素并将 URL 设置为
src - 加载 (
onload) 后，您可以将 SVG 绘制为画布上的图像 - 使用
toDataURL()从画布中获取 PNG 文件.
- Convert the SVG string to a
Blob - Get an URL for the Blob
- Create an image element and set the URL as
src - When loaded (
onload) you can draw the SVG as an image on canvas - Use
toDataURL()to get the PNG file from canvas.
例如:
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 处理程序).
Of course, console.log here is just for example. Store/transfer the string instead here. (I would also recommend adding an onerror handler inside the method).
还要记住使用 width 和 height 属性设置画布大小，或者使用属性从 JavaScript 设置.
Also remember to set canvas size using either the width and height attributes, or from JavaScript using properties.
这篇关于如何将内联 svg(在 DOM 中)绘制到画布上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
