admin管理员组文章数量:1418113
I am generating SVG object using jQuery SVG plug-in. The problem is how can I convert it into image in my script.
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 this and this but without success.
Could you please show me how to convert this svg into any type of image?
Thanks in advance.
UPDATE
The problem is solved and I have posted the solution as an answer, check it here.
I am generating SVG object using jQuery SVG plug-in. The problem is how can I convert it into image in my script.
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 this and this but without success.
Could you please show me how to convert this svg into any type of image?
Thanks in advance.
UPDATE
The problem is solved and I have posted the solution as an answer, check it here.
Share Improve this question edited May 23, 2017 at 11:59 CommunityBot 11 silver badge asked Jan 28, 2011 at 11:35 BakhtiyorBakhtiyor 7,31815 gold badges58 silver badges80 bronze badges 1- possible duplicate of Convert SVG to image (JPEG, PNG, etc.) – Phrogz Commented Nov 17, 2011 at 2:02
2 Answers
Reset to default 6This seams to be very hard to do.
I found this project that attempts to do this:
http://www.svgopen/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 plete.
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.
I have finally solved the problem of converting SVG to image file. Here is the solution, if anybody is interested in:
<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./svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode./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:
<?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 site and jQuery SVG library from here .
Hope this will help to many of you who are looking toward converting SVG to image right from your program.
Best,
Bakhtiyor
本文标签： javascriptConvert jQuery SVG to imageStack Overflow
版权声明：本文标题：javascript - Convert jQuery SVG to image - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745280600a2651403.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论