Javascript 将jQuery SVG转换为图像_Javascript_Jquery_Canvas_Svg

Javascript 将jQuery SVG转换为图像

javascript jquery canvas svg

Javascript 将jQuery SVG转换为图像,javascript,jquery,canvas,svg,Javascript,Jquery,Canvas,Svg,我正在使用jQuerySVG插件生成SVG对象。问题是如何在脚本中将其转换为图像我的脚本如下： <html> <head> <script type="text/javascript" src="jquery-latest.min.js"></script> <script type="text/javascript" src="jquery.svg.js"></script>

我正在使用jQuerySVG插件生成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>

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

我试过了，但没有成功

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

提前谢谢

更新

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

这很难做到

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

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

他们确实使用了一种解决方案，通过服务器将SVG渲染为PNG，这可能是目前唯一真正有效的解决方案。

这很难做到

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

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

他们确实使用了一种解决方案，通过服务器将SVG渲染为PNG，这可能是目前唯一真正有效的解决方案。

我终于解决了将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的内容如下：

<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>

<?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，从下载jQuery SVG库

希望这将有助于许多希望从程序中将SVG转换为图像的人

最好的

Bakhtiyor

我终于解决了将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的内容如下：

<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>

<?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，从下载jQuery SVG库

希望这将有助于许多希望从程序中将SVG转换为图像的人

最好的

Bakhtiyor

我看不出这会产生任何影响image@fazo. 它在当前文件夹中生成test.png。问题是，您正在svg.php中生成“test.png”，但它与png没有任何关系。您可以使用图像查看器查看它吗？不。将一些数据写入文件并命名为data.png并不能使其成为png文件。这是我在这个网站上看到的最愚蠢的答案之一。你需要注意法佐在说什么……我看不出这会产生任何影响image@fazo. 它在当前文件夹中生成test.png。问题是，您正在svg.php中生成“test.png”，但它与png没有任何关系。您可以使用图像查看器查看它吗？不。将一些数据写入文件并命名为data.png并不能使其成为png文件。这是我在这个网站上看到的最愚蠢的答案之一。你需要注意法佐在说什么……可能的重复