Скопируйте SVG-изображения из браузера в буфер обмена

Я разрабатываю веб-приложение, которое принимает пользовательские входы, выполняет инженерные вычисления, а затем отображает отформатированный отчет или графику. Графика - это инженерные диаграммы, а не всегда стандартные графики, такие как круговые диаграммы. Основная функция приложения - предоставить пользователю возможность копировать эти диаграммы из браузера в документ Word или Excel.

Мне нужно сделать выбор при использовании SVG, сгенерированного на клиенте, или растровых изображений, сгенерированных на стороне сервера. Я предпочитаю подход SVG, и прототипирование выглядит неплохо, однако копирование SVG-графика, по-видимому, непоследовательно поддерживается в браузерах, особенно если график показан в div (т.е. Вся страница не является .svg). Например, IE показывает "копию" в раскрывающемся списке, но копирует только часть изображения SVG в буфер обмена. Chrome не дает опции копирования, если я нажимаю правой кнопкой мыши на графике SVG.

Если я вокруг Google, я с удивлением вижу, как мало информации о проблеме получения изображения SVG из веб-приложения в буфер обмена.

Мой вопрос для читателей, которые справились с этой проблемой:

Существует ли последовательный способ получить элемент SVG, который является частью больше DOM в буфер обмена, предпочтительно используя JavaScript;
Любые другие рекомендации, учитывая мое требование получения графики от браузера до буфера обмена?

Ответ 1

Вместо отображения svg в качестве элемента svg отобразите его с тегом img. Это имеет некоторые ограничения (вы не можете отображать пользовательские шрифты или встроенные скрипты, но, похоже, это не ваш случай использования). Поверхность - это то, что ведет себя точно так, как вы ожидали бы от изображения (вы можете перетащить, щелкнуть правой кнопкой мыши и скопировать и т.д.).

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

<img src="data:image/svg;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolf" width="..." height="..." alt="diagram" />

Где R0lGODlhEAAQAMQ... - ваш svg, закодированный в base64.

Ответ 2

Мне удалось скопировать содержимое SVG в буфер обмена как простой XML-текст, но для меня это оказалось бесполезным, потому что Inkscape (который я использую для работы с SVG), не распознает текст в буфере обмена как SVG. Похоже, что копирования текста SVG недостаточно, и браузер также должен установить mime-type на image/svg+xml.

Я попробовал несколько трюков с API-интерфейсом HTML5 Clipboard, но закончил с проблемой, что Chrome не может экспортировать mime-type в системный буфер обмена. Соответствующий отчет об ошибках и ссылка jsfiddle для него находятся здесь https://code.google.com/p/chromium/issues/detail?id=504700

Ответ 3

Javascript и буфер обмена - это боль в **.

Существует одно обходное решение для вашей ситуации, о котором я знаю:

Если это настоящий SVG файл, в Chrome щелкните правой кнопкой мыши по изображению и выберите "Осмотреть элемент". Откроется консоль браузера и откроется элемент SVG, который вы можете выбрать в инспекторе. Щелкните правой кнопкой мыши тег svg в инспекторе и выберите "Копировать" или "Копировать как HTML" (я не могу точно запомнить варианты)

Вставьте этот текст в текстовый файл, а затем сохраните файл с расширением SVG. Затем его можно открыть в любом браузере или программе редактирования SVG. Inkscape является хорошим выбором для редактирования и отладки, так как вы можете просматривать и редактировать весь файл SVG в редакторе XML-стиля.

** Извините, я пропустил первую часть вашего запроса. Это будет сложно. Боюсь, я не могу с этим поделать. Скопировать и вставить, вероятно, не самый лучший вариант. Есть PHP-классы для управления файлами SVG и Excel, и, вероятно, это будет путь.

Ответ 4

Я столкнулся с той же проблемой в проекте. Заказчик хотел иметь довольно сложный график. Мы решили разработать его с помощью SVG. Работал отлично, но клиент хотел иметь возможность загрузить график в виде картинки. После поиска в интернете мы нашли saveSvgAsPng (https://www.npmjs.com/package/save-svg-as-png). Это помогло нам.

График на странице примерно так:

<svg id="graph1" style="width: 700px; height: 700px">
....
.....
...
</svg>

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

Я установил пакет, упомянутый выше.

<script src="/path/to/lib/save-svg-as-png/lib/saveSvgAsPng.js"></script>

Добавлен "display: none:" в код svg, иначе у нас будет два экземпляра одного и того же изображения:

<svg id="graph1" style="width: 700px; height: 700px; display: none">

 <!-- // code goes here  -->


</svg>

Сразу после объявления графа svg я добавил новое изображение. Это изображение является заполнителем для нового представления изображения PNG для изображения SVG. Сначала я прячу его, чтобы изображение не мерцало во время загрузки. Источник изначально не указан:

<img id="graph1_as_png" src="" width="700" height="700" style="display: none">

После недавно добавленного изображения я добавил несколько строк кода, которые используются для преобразования:

<script>

    svgAsPngUri(document.getElementById("graph1")).then(uri => {
      $("#graph1_as_png").attr('src', uri).show();
    });

</script>

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

Я надеюсь, что это поможет вам, а также..