如何将svg转换为png使用html5 canvas / javascript / jquery并保存在服务器上 [英] How to convert svg to png using html5 canvas/javascript/jquery and save on server
问题描述
好，我需要一些帮助将.svg文件/图像转换为.png文件/图像...
我的网页上显示了.svg图片。它保存在我的服务器上（作为.png文件）。我需要将其转换为.png文件（点击按钮），并将.png文件保存在服务器上（我将这样做与.ajax请求）。
但是问题是转换。
我读了很多关于html5 Canvas的东西，这可能有助于做我现在需要做的事，找不到任何明确的解决方案，我的问题，而且，我不明白我发现的一切...所以我需要一些明确的建议/帮助我的方式。
这里是html idea模板：
< html&
< body>
< svg id =mySvgwidth =300pxheight =300px>
<！ - my svg data - >
< / svg>
< label id =button>点击可转换< / 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字符串转换为
Blob - 获取Blob的网址
- 创建图片元素并将网址设置为
src - 当加载（
onload）时，
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;
}
//用法：
drawInlineSVG（ctxt，svgText，function（）{
console.log（canvas.toDataURL（））; // - > ; PNG data-uri
}）;
当然，这里的console.log只是一个例子。存储/传输字符串，而不是这里。 （我还建议在方法中添加 onerror 处理程序）。
width 和 height 属性，或使用属性的JavaScript。
Well, I need some help about convert .svg file/image to .png file/image...
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).
But the problem is the conversion.
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.
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>
and some js :
<script>
$("body").on("click","#button",function(){
var svgText = $("#myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
});
</script>
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
For inline SVG you'll need to:
- 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.
For example:
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
});
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).
Also remember to set canvas size using either the width and height attributes, or from JavaScript using properties.
这篇关于如何将svg转换为png使用html5 canvas / javascript / jquery并保存在服务器上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
