Сохранить ‹svg› HTML5 в PNG или изображение

У меня есть диаграммы, созданные с помощью библиотеки Javascript D3, и мне нужно сохранить их в файл PNG или SVG.

Есть ли какая-нибудь библиотека, которая делает работу?

Я нашел этот https://github.com/sampumon/SVG.toDataURL, но он не работает на моем html5 в Firefox консоль я получил эту ошибку:

NS_ERROR_NOT_AVAILABLE: Компонент недоступен [Вмешательство из-за этой ошибки]

ctx.drawImage (изображение, 0, 0);


svg html export
person Salvatore Dibenedetto    schedule 31.01.2013    source источник
comment
Вот пример того, как это сделать в Chrome: bl.ocks.org/3831266   -  person methodofaction    schedule 31.01.2013
comment
Спасибо! это работает ... но когда я пытаюсь открыть файл в иллюстраторе, он просит меня проверить файл. У меня есть это сообщение: этот svg недействителен. Проверить перед открытием.   -  person Salvatore Dibenedetto    schedule 01.02.2013
comment
Найдите средство проверки XML и убедитесь, что это допустимый XML. Если все в порядке, опубликуйте код в своем вопросе, и я помогу вам найти ошибку, из-за которой Illustrator отключается.   -  person methodofaction    schedule 01.02.2013
comment
Кроме того, убедитесь, что вы включили пространство имен XML в тег svg, например... d3.select('svg').attr("xmlns", "http://www.w3.org/2000/svg");   -  person methodofaction    schedule 01.02.2013

Ответы (3)


arrow_upward
7
arrow_downward

Пример из developer.mozilla.org, демонстрирующий, как экспортировать svg в png с использованием элемента холста.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
             '<em>I</em> like ' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
  var png_img = canvas.toDataURL("image/png");
}

img.src = url;
person Rafał R    schedule 09.12.2016
comment
не удалось использовать использование, выбрав элемент ‹svg› в инспекторе - person brauliobo; 09.12.2019

arrow_upward
1
arrow_downward

Метод сценария на стороне сервера

Вот простой способ сохранить элементы svg в png (хотя он использует сценарии на стороне сервера, которые могут отличаться от ожидаемых): Checkout эта страница.

Как задокументировано автором, клиент извлекает элемент svg (используя XMLSerializer.serializeToString) и отправляет его на сервер; сервер преобразует его в png и отправляет обратно клиенту. Сервер может использовать любую удобную программу (в данном случае rsvg-convert).

Библиотека Canvg

Вы можете использовать эту библиотеку, чтобы сделать это на стороне клиента (проверьте!):

canvg — это парсер и визуализатор SVG. Он берет URL-адрес SVG-файла или текст SVG-файла, анализирует его в JavaScript и отображает результат в элементе Canvas.

Используйте это так:

//load a svg snippet in the canvas with id = 'drawingArea'
canvg(document.getElementById('drawingArea'), '<svg>... </svg>')

Затем вы можете использовать метод toDataURL: document.getElementById('drawingArea').toDataURL('image/png');

person wzhd    schedule 09.03.2014

arrow_upward
0
arrow_downward

Это расширение работает со всеми тегами <svg> на странице: https://chrome.google.com/webstore/detail/svg-export/naeaaedieihlkmdajjefioajbbdbdjgp?hl=en-GB

person brauliobo    schedule 09.12.2019