javascript 将 jQuery SVG 转换为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4827764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert jQuery SVG to image
提问by Bakhtiyor
I am generating SVG object using jQuery SVG plug-in. The problem is how can I convert it into image in my script.
我正在使用 jQuery SVG 插件生成 SVG 对象。问题是如何在脚本中将其转换为图像。
My script is following:
我的脚本如下：
<html>
<head>
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript">
$(function(){
$("#draw").click(function(){
$('#svg_container').svg();
svg = $('#svg_container').svg('get');
svg.clear(true);
svg.circle(200, 220, 150, {fill: "red", stroke: "blue", strokeWidth: 5});
alert(svg.toSVG()); //this prints svg source of the generated image, i.e. circle
});
});
</script>
</head>
<body>
<div id="svg_container" style="position: absolute; left: 100px; top: 100px; width: 400px; height: 400px; border: thin solid #4297D7;"></div>
<button id="draw">Draw</button>
</body>
</html>
I have tried out thisand thisbut without success.
Could you please show me how to convert this svg into any type of image?
你能告诉我如何将这个 svg 转换成任何类型的图像吗？
Thanks in advance.
提前致谢。
UPDATE
更新
The problem is solved and I have posted the solution as an answer, check it here.
问题已解决，我已将解决方案作为答案发布，请在此处查看。
采纳答案by Bakhtiyor
I have finally solved the problem of converting SVG to image file. Here is the solution, if anybody is interested in:
终于解决了SVG转图片文件的问题。这是解决方案，如果有人感兴趣：
<html>
<head>
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script type="text/javascript">
$(function(){
function q(k){
var qs = window.location.search.substring(1);
var t = qs.split("&");
for (i=0;i<t.length;i++) {
kv = t[i].split("=");
if (kv[0] == k) return unescape(kv[1]).replace('+',' ');
}
return null;
}
var context;
function bodyonload() {
if (typeof(FlashCanvas) != 'undefined') context = document.getElementById('canvas').getContext;
var qUrl = q('url'); if (qUrl != null && qUrl != '') { r(); canvg('canvas', qUrl); }
var qSvg = q('svg'); if (qSvg != null && qSvg != '') { r(); canvg('canvas', qSvg); }
}
function render() {
var c = document.getElementById('canvas');
c.width = 400;
c.height = 500;
if (context) c.getContext = context;
canvg(c, document.getElementById('svg').value);
var svg_content = c.toDataURL();
$.ajax({
type:"POST",
url:"svg.php",
data: ({
svg_content: svg_content
}),
timeout: 30000, //30 sec.
});
}
function r() {
var c = document.getElementById('canvas');
c.width = '1000'; //change it to the width of your image
c.height = '600'; //change it to the height of your image
if (context) c.getContext = context;
}
$("#save").click(function(){
render();
});
$("#draw").click(function(){
$('#svg_container').svg();
svg = $('#svg_container').svg('get');
svg.clear(true);
svg.circle(200, 220, 150, {fill: "red", stroke: "blue", strokeWidth: 5});
$("#svg").val(svg.toSVG());
});
});
</script>
</head>
<body>
<textarea id="svg" rows="5" cols="50" style="visibility: hidden;"></textarea><br />
<canvas id="canvas" width="1000px" height="600px"></canvas>
<div id="svg_container" style="position: absolute; left: 100px; top: 100px; width: 400px; height: 400px; border: thin solid #4297D7;"></div>
<button id="draw" style="position: absolute; top:400px; left: 500px;">Draw</button>
<button id="save" style="position: absolute; top:400px; left: 550px;">Save</button>
</body>
</html>
The content of svg.php is following:
svg.php 的内容如下：
<?php
if (isset($_POST['svg_content'])){
$imageData=$_POST['svg_content'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen('test.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>
You can download jQuery library (jquery-latest.min.js) from jQuery official web siteand jQuery SVG library from here.
您可以从 jQuery 官方网站下载 jQuery 库 (jquery-latest.min.js)，从这里下载jQuery SVG 库。
Hope this will help to many of you who are looking toward converting SVG to image right from your program.
希望这对希望从程序中将 SVG 转换为图像的许多人有所帮助。
Best,
最好的，
Bakhtiyor
巴赫蒂约尔
回答by David M?rtensson
This seams to be very hard to do.
这个接缝很难做到。
I found this project that attempts to do this:
我发现这个项目试图做到这一点：
http://www.svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/index.html
http://www.svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/index.html
I also found one project that tried to build a SVG renderer for Canvas but it was far from complete.
我还发现了一个试图为 Canvas 构建 SVG 渲染器的项目，但它远未完成。
They did use a solution to go by the server and have the SVG rendered to PNG there, that might be the only really working solution right now.
他们确实使用了一个解决方案，通过服务器将 SVG 渲染为 PNG，这可能是目前唯一真正有效的解决方案。
