Проблема сохранения как png SVG, сгенерированного Raphael JS на холсте - PullRequest
Новая
       36

Проблема сохранения как png SVG, сгенерированного Raphael JS на холсте

8 голосов
/ 18 ноября 2010

Я пытаюсь преобразовать SVG, сгенерированный Raphael JS (и пользователем, поскольку вы можете перетаскивать и вращать изображения). Я следовал этому Конвертируем SVG в изображение (JPEG, PNG и т. Д.) В браузере , но все равно не могу его получить.

Это должно быть легко, но я не могу понять, что я неправильно понял.

Я получил свой svg в div с #ec как id, а холст - #canvas. 

function saveDaPicture(){
    var img = document.getElementById('canvas').toDataURL("image/png");
    $('body').append('<img src="'+img+'"/>');
}
$('#save').click(function(){
    var svg = $('#ec').html();
    alert(svg);
    canvg('canvas', svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true});
});

Предупреждение дает мне: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512">
<desc>Created with Raphael</desc>
<defs></defs>
<image x="0" y="0" width="300" height="512" preserveAspectRatio="none" href="imageurl.jpg"></image>
<rect x="168" y="275" width="52" height="70" r="0" rx="0" ry="0" fill="none" stroke="#000" stroke-dasharray="8,3" transform="rotate(21.91207728 194 310)" style="opacity: 1; display: none; " opacity="1"></rect>
<circle cx="50" cy="50" r="50" fill="none" stroke="#000"></circle>
<image x="358" y="10" width="39" height="138" preserveAspectRatio="none" href="imageurl2.png" style="cursor: move; "></image>
<image x="397" y="10" width="99" height="153" preserveAspectRatio="none" href="imageurl3.png" style="cursor: move; "></image>
<image x="184" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl4.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image>
<image x="204" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl5.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image>
<image x="170" y="277" width="48" height="66" preserveAspectRatio="none" href="imageurl6.png" style="cursor: move; opacity: 1; " r="50" opacity="1" transform="rotate(21.91207728 194 310)"></image>
</svg>

это XML-файл svg, и если я верю документация canvg , это хорошо.

Так или иначе, с этим кодом переменная img, которая должна иметь преобразованные данные изображения, получила данные пустого png с размерами svg.

Единственное, что я предполагаю, это то, что svg, сгенерированный Raphael JS, не подходит для canvg (например, href из image должно быть xlink:href, если я следую рекомендациям W3C )

Кто-нибудь получил представление об этой проблеме? : D

Ответы [ 3 ]

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

canvg принимает SVG данные, путь к файлу или однострочную строку

, но в вашем коде вы передаете html-содержимое div #ec как 

canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true});

Оба метода jQuery $.html() и DOM innerHTML возвращают содержимое HTML элемента как есть, поэтому, скорее всего, в несколько строк.

canvg интерпретирует это многострочное HTML-содержимое какпуть к файлу 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512">

и пытается извлечь данные из искаженного URL.

Таким образом, процесс преобразования SVG в Canvas завершился неудачно, и по этой причине вы не получаете изображение, как ожидается.

Вот обновленная версия, которая должна работать, 

function saveDaPicture(){
    var img = document.getElementById('canvas').toDataURL("image/png");
    $('body').append('<img src="'+img+'"/>');
}

$('#save').click(function(){
    var svg = $('#ec').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
                             // strips off all spaces between tags
    //alert(svg);
    canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true});
});
2 голосов
/ 08 августа 2012

svgfix.js решит эту ошибку.взгляните на это сообщение в блоге Экспорт графики Рафаэля в изображение

1 голос
/ 08 января 2011

Я работал с SVG - Редактировать и генерировал изображения SVG, мы установили ImageMagic на сервер (возможно, он уже установлен).После установки вам нужно всего лишь выполнить команду типа "convert foo.svg foo.png" в терминале.Если вы используете php, то вы можете сделать: 

shell_exec("convert image.svg image.png");

В php, и все готово.

...