Сохранить изображение svg, отображаемое javascript на локальный диск как .png файл

Я новичок в SVG, но не продвинутый пользователь JavaScript. У меня есть веб-страница с svg-содержимым, динамически отображаемая javascript. В Internet Explorer, когда я нажимаю правой кнопкой мыши на svg-контент, я получаю опцию "Сохранить изображение как", и я могу сохранить содержимое как png или svg.

Как это сделать программно, нажав кнопку и разрешив пользователю сохранять содержимое в png на своей машине.

Ответ 1

Из моего исследования нет никакого способа сделать это, не отправив содержимое svg на ваш сервер и не вернув данные для сохранения в виде загрузки файла.

Однако даже это сложно сделать с помощью одного запроса в стиле AJAX, и решение удивительно запутано. Другие связаны с другими сообщениями, которые объясняют это, но я уже прошел одни и те же ответы, и никто из них не объяснил это очень хорошо.

Вот шаги, которые мне помогли:

Используйте JavaScript для сериализации содержимого SVG.

var svgString = new XMLSerializer().serializeToString(svgElement);
Создайте скрытый iframe, чей src - это URL-адрес отправки. Дайте ему id.
Создайте скрытый input. Задайте value этого input для сериализованного содержимого SVG.
Создайте форму, целью которой является id, указанная в iframe, и чей action - это URL-адрес отправки. Поместите input внутри form.
Отправьте form.
На вашем сервере используйте все доступные инструменты (я не использую .NET, поэтому вы здесь сами...), чтобы преобразовать документ SVG в PNG. Отправьте содержимое PNG обратно клиенту, убедившись, что вы используете заголовки:

Content-Type:image/png

Content-Disposition:attachment; filename=mypng.png

Браузер должен инициировать загрузку файла на возвращаемом контенте, хотя это зависит от браузера, и я не уверен, но некоторые браузеры могут открывать изображения на новой вкладке, а не открывать диалоговое окно загрузки файлов.

Вот (несовершенная) функция, которая будет выполнять работу AJAX (использует JQuery, но вы должны получить эту идею). data - сериализованный SVG:

function ajaxFileDownload(url, data) {
    var iframeId = "uniqueIFrameId";     // Change this to fit your code
    var iframe = $("#" + iframeId); 

    // Remove old iframe if there
    if(iframe) { 
        iframe.remove(); 
    }

    // Create new iframe 
    iframe = $('<iframe src=""' + url + '"" name="' + iframeId + '" id="' + iframeId + '"></iframe>')
        .appendTo(document.body)
        .hide(); 

    // Create input
    var input = '<input type="hidden" name="data" value="' + encodeURIComponent(data) + '" />'; 

    // Create form to send request 
    $('<form action="' + url + '" method="' + 'POST' + '" target="' + iframeId + '">' + input + '</form>')
        .appendTo(document.body)
        .submit()
        .remove();
}

Обратите внимание, что этот URL-код кодирует содержимое SVG, поэтому вам придется декодировать его на своем сервере перед преобразованием в PNG.

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

Надеюсь, это поможет.