Как сделать снимок экрана с контентом на веб-странице / объединить 2 изображения - PullRequest
3 голосов
/ 23 августа 2010

У меня есть страница, на которой я использую Raphael.js, чтобы фактически позволить пользователю перемещать точку вокруг холста с фоновым изображением.То, что я пытаюсь сделать, это захватить конечное изображение холста, где я смогу увидеть, где пользователь разместил точку после того, как пользователь нажимает кнопку «Подтвердить позицию».Я думал о двух методах, однако я не слишком уверен в том, как их выполнять.

Метод 1: Просто захватите холст как изображение.Каким-то образом это невозможно с одним только Javascript, и я не уверен, есть ли у Рафаэля встроенная функция, позволяющая это сделать.Я также читал об экспорте файла svg xml и передавал его через библиотеку типа «Батик», однако я не совсем уверен, как это сделать.Уроки, которые я прочитал, действительно сбивают с толку.

Метод 2: Использовать координаты точки и наложить уже имеющееся у меня изображение точки на фоновое изображение и сохранить его как изображение.

Пожалуйста, совет, и я надеюсь, что я был ясен.

1 Ответ

0 голосов
/ 13 июля 2011

Вы можете достичь этой серверной стороны:

  • получить код SVG с помощью JavaScript
  • отправить его в скрипт PHP на вашем сервере с XHR
  • PHP должен сохранить SVG в файл и использовать Inkscape для его преобразования в одну команду:
    inkscape in.svg -e out.png -w 300 -h 500
  • отправить имя вновь созданного файла клиенту
  • показать ссылку на картинку в JavaScript

Этот метод не обеспечивает поддержку VML (формат векторной графики Internet Explorer); однако вы можете использовать VectorConverter для преобразования VML в SVG.

...