Конвертировать jQuery SVG в изображение - PullRequest
Новая
       5

Конвертировать jQuery SVG в изображение

2 голосов
/ 28 января 2011

Я генерирую объект 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>

Я попробовал это и это , но безуспешно.

Не могли бы вы показать мне, как конвертировать этот SVG в любой тип изображения?

Заранее спасибо.

UPDATE

Проблема решена, и я отправил решение в качестве ответа, отметьте его здесь .

Ответы [ 2 ]

6 голосов
/ 28 января 2011

Это швы очень трудно сделать.

Я нашел этот проект, который пытается сделать это:

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

Я также нашел один проект, который пытался построить рендерер SVG для Canvas, но он был далек от завершения.

Они использовали решение, чтобы пройти по серверу и визуализировать SVG там в PNG, что сейчас может быть единственным действительно работающим решением.

0 голосов
/ 29 января 2011

Я наконец-то решил проблему преобразования 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-latest.min.js) с официального веб-сайта jQuery и библиотеки SVG jQuery из здесь .

Надеюсь, это поможет многим из вас, кто хочет преобразовать SVG в изображение прямо изваша программа.

Бест,

Бахтиёр

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...