2011-01-28 18 views
2

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> 

私は成功せずthisthisを試してみました。

このタイプの画像をどのように変換するのか教えてください。

ありがとうございます。

UPDATE

問題が解決されると、私はそれhereをチェックし、答えのような溶液を掲載しています。

+0

可能重複[画像をSVGに変換(JPEG、PNGなど)](http://stackoverflow.com/questions/3975499/convert-svg-to- image-jpeg-png-etc) – Phrogz

答えて

-6

私は最終的にSVGを画像ファイルに変換する問題を解決しました。誰もが興味を持っている場合はここで解決策は、次のとおりです。

svg.phpの内容は以下の通りです
<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> 

<?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とjQuery SVGライブラリhereから。

これは、あなたのプログラムからSVGを直接イメージに変換しようとしている多くの方々に役に立ちます。

ベスト、

Bakhtiyor

+0

これはどの画像も生成されません – fazo

+0

@fazo。現在のフォルダにtest.pngを生成します。 – Bakhtiyor

+0

はい、内容は何ですか?なぜなら私はsvg.phpであなたがどんなpngを生成しているのかわからないからです。 – fazo

6

この継ぎ目は非常に難しいです。

私はこれを行うにしようと、このプロジェクトが見つかりました:

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

を私はまた、キャンバスのためのSVGレンダラを構築しようとした一つのプロジェクトを見つけたが、それははるかに完了しましたから。

彼らはサーバーを経由してSVGをPNGにレンダリングするソリューションを使用しましたが、これは現時点で唯一の実用的なソリューションかもしれません。