Question

我使用jQuery SVG插件生成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转换为任何类型的图像？

提前致谢。

更新

问题已解决，我已将解决方案作为答案发布，请检查here。

Answer 1

这种接缝很难做到。

我发现这个项目试图这样做：

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

我还发现了一个试图为Canvas构建SVG渲染器的项目，但它远未完成。

他们确实使用了一个解决方案来通过服务器并将SVG渲染到那里的PNG，这可能是目前唯一真正有用的解决方案。

Answer 2

我终于解决了将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官方web site下载jQuery库（jquery-latest.min.js），从here下载jQuery SVG库。

希望这对于那些希望从程序中将SVG转换为图像的人有所帮助。

最佳，

Bakhtiyor

将jQuery SVG转换为图像

2 个答案: