当前位置：文江博客话题详情

将 jQuery SVG 转换为图像

发布于 2024-10-14 18:13:08 字数 1371 浏览 1 评论 0 原文

我正在使用 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>

我已经尝试过这个和这个但没有成功。

您能告诉我如何将此 svg 转换为任何类型的图像吗？

提前致谢。

更新

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

原文

I am generating SVG object using jQuery SVG plug-in. The problem is how can I convert it into image in my script.

My script is following:

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

I have tried out this and this but without success.

Could you please show me how to convert this svg into any type of image?

Thanks in advance.

UPDATE

The problem is solved and I have posted the solution as an answer, check it here.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧夏天 2024-10-21 18:13:08

这看起来很难做到。

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

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

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

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

回复收藏 0 原文

￡冰雨忧蓝° 2024-10-21 18:13:08

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

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

最好的，

巴赫蒂约尔

I have finally solved the problem of converting SVG to image file. Here is the solution, if anybody is interested in:

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

The content of svg.php is following:

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

You can download jQuery library (jquery-latest.min.js) from jQuery official web site and jQuery SVG library from here .

Hope this will help to many of you who are looking toward converting SVG to image right from your program.

Best,

Bakhtiyor

回复收藏 0 原文

~没有更多了~