將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轉換爲圖像

回答

相關問題