Слияние SVG и .JPG в одно изображение?

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

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

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

источник

2012-03-29 theDom

Есть ли опции ImageMagick? http://www.imagemagick.org/script/magick-vector-graphics.php – PinnyM

Возможные дубликаты: http://stackoverflow.com/questions/4086703/convert-raphael-svg-to-image-png-etc-client -side http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser/3976034#3976034 – JayC

Я изучаю расширение Imagick для PHP, чтобы, возможно, выполнить что я пытаюсь сделать. Что касается возможных повторяющихся потоков, я смотрел на них обоих, и зависимость от Canvas и его отсутствия в IE делает его трудным для того, что, как предполагается, является агростатическим приложением для браузера.Тот и оба потока обращаются только к преобразованию самого SVG в графику, а не к объединению упомянутого графического изображения SVG, а другой - к одному изображению. – theDom

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

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

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

источник

2012-03-29 15:30:01

Хорошо ... это возможно, используя стандартный клиентский JavaScript или что-то еще на сервере? Я не уверен, что вы имеете в виду, рисуя строки на изображении «в памяти». – theDom

. Затем рисунок не выполняется в браузере (как и в случае с JavaScript), а на сервере в процессе обработки запроса. –

можно было бы, чтобы вставить изображение в 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. Его немного сложно понять сначала, но очень хорошо написано.

источник

2012-03-30 23:56:20 Jlange

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

Вот идея, хотя:

Поместите изображение внутри SVG DOM с помощью SVG <image> тег
Пройди свой код SVG через canvg библиотеки
Используйте toDataURL метод canvg к сгенерируйте изображение

источник

2012-04-01 20:08:17 Emil

Слияние SVG и .JPG в одно изображение?

ответ

Смежные вопросы