如何在画布上绘制内嵌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，但实际上我却...无处...
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屋！
