Объединить SVG и .JPG в одно изображение? - PullRequest
Новая
       13

Объединить SVG и .JPG в одно изображение?

6 голосов
/ 29 марта 2012

У меня есть веб-сайт, использующий настройку SVG / VML (через Raphael JS) в картографическом приложении, где SVG используется для отображения графики поверх фоновой карты.Это очень хорошо работает на экране и для печати печатных карт с наложениями.Однако эта установка не работает, когда пользователь хочет сохранить изображение карты с наложением SVG в локальный файл .JPG.

В частности, использование стандартной функциональности щелчка правой кнопкой мыши большинства браузеров для «Сохранить изображение как ...» не работает, когда поверх изображения находится элемент SVG / VML.Щелкните правой кнопкой мыши на карте, и пользователь сможет сохранить изображение карты, но без наложения.Щелкните правой кнопкой мыши на перекрывающемся элементе SVG, и лучшее, что получает пользователь, - это возможность проверить элемент или сохранить какой-либо HTML (он зависит от браузера).

Поэтому мой главный вопрос здесь таков;Можно ли взять изображение и элемент SVG и объединить их (желательно на стороне клиента, хотя я открыт для опций) в одно «сплющенное» изображение, .JPG, .PNG или другое, которое затем можно щелкнуть правой кнопкой мышии сохранены или загружены на ПК пользователя по запросу?

Ответы [ 3 ]

0 голосов
/ 31 марта 2012

Одной из возможностей может быть вставка изображения в SVG, а затем создание URL-адреса данных с объединенными изображениями. В следующем примере это достигается в формате png: 

 var datauri = c.toDataURL('image/png');

где c - ваш отформатированный слой SVG. Для получения дополнительной информации, ознакомьтесь с этим редактором с открытым исходным кодом, http://code.google.com/p/svg-edit/, в файлах svgcanvas.js и svg-editor.js, который является хорошим примером того, как экспортировать SVG как файл png. Поначалу это немного сложно понять, но очень хорошо написано.

0 голосов
/ 02 апреля 2012

Боюсь, вам будет нелегко пытаться визуализировать SVG на элементе Canvas, просто так из-за ограничений безопасности (например, я вообще не смог заставить это работать в Firefox).

Но вот идея:

  1. Поместите ваше изображение в SVG DOM, используя тег svg <image>
  2. Передайте код SVG через библиотеку canvg
  3. Используйте метод toDataURL для canvg для генерации изображения
0 голосов
/ 29 марта 2012

Что нужно сделать, вместо наложения JPG и SVG:

  • Возьмите оригинальное изображение
  • Нарисуйте линии в файле SVG на нем в памяти
  • Вывод этого одиночного изображения в виде JPG в браузер.

Это, конечно, означает, что вы должны иметь возможность интерпретировать SVG ...

...