将jQuery SVG转换为图像

我正在使用jQuery SVG插件生成SVG对象。问题是如何将其转换为脚本中的图像。将jQuery 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"> 
$(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>

我已经尝试了this和this但没有成功。

你能告诉我如何将这个svg转换成任何类型的图像？

在此先感谢。

UPDATE

问题是解决了，我已经发布了解决方案作为一个答案，检查here。

来源

2011-01-28 Bakhtiyor

可能重复的[转换到SVG图像（JPEG，PNG等）]（http://stackoverflow.com/questions/3975499/convert-svg-to- image-jpeg-png-etc） – Phrogz 2011-11-17 02:02:38

-6

我终于解决了将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>

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); 
} 
?>

您可以从jQuery的下载jQuery库（jQuery的latest.min.js）官方web site和来自here的jQuery SVG库。

希望这将有助于你们中的许多人将SVG转换成图像的权利从你的程序。

最佳，

Bakhtiyor

的

来源

2011-01-29 12:32:45 Bakhtiyor

我没有看到这产生任何图像 – fazo 2011-01-29 14:17:52

这个接缝很难做到。

，我发现这个项目，试图做到这一点：

http://www.svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/index.html

我还发现一个项目，该项目试图建立画布SVG渲染器，但它没有完成远。

他们确实使用了一个解决方案去服务器，并将SVG呈现给PNG，这可能是目前唯一真正有效的解决方案。

来源

2011-01-28 12:48:56

将jQuery SVG转换为图像

回答

相关问题