Захват скриншота веб-сайта на клиенте (Javascript или flash)

Существует ли какой-либо метод создания снимка экрана (только содержимого окна браузера) из браузера с помощью javascript или встроенного флэш-объекта и т. д., чтобы сохранить или распечатать изображение содержимого страницы в полном качестве или альтернативный подход.

У меня есть веб-приложение (asp.net 3.5) с картами Google и другими клиентскими операциями ajax, такими как настраиваемый сервер плитки. Я пытался реализовать способ, позволяющий пользователю печатать снимки веб-страницы хорошего качества.

Я использовал базовый Window.Print(), но как в IE, так и в FF на картах Google есть много артефактов, а некоторые элементы, такие как всплывающий пузырь, не печатаются. Я экспериментировал с сохранением pdf через cutepdf (просто чтобы опубликовать пример здесь), и качество через window.print() тоже низкое.

Например, Скриншот с аддоном FireShot идеален и то, что я хочу, чтобы клиент имел. однако это только FF, и я не могу попросить клиентов установить элементы управления addons/activex в свои браузеры.

Взгляните на этот загруженный пример zip-файла (4 МБ), содержащий:

  1. Пример снимка экрана с использованием FireShot (пример того, чего я хочу добиться с помощью кнопки html/JS на странице)
  2. Результат Firefox Window.Print() (cutepdf используется для сохранения в формате pdf)
  3. Результат IE Window.Print() (cutepdf используется для сохранения в формате pdf)

обратите внимание на 2,3 маленький пузырь не печатается, даже когда он открыт.

На данный момент я добавил функцию на свой сайт, чтобы перейти в полноэкранный режим и помочь пользователю сделать снимок экрана или вызвать функцию window.print().

Я все еще ищу способ распечатать/захватить мою страницу.

есть ли какие-либо элементы управления flash/activex, которые я могу включить на свою страницу и через них обеспечить качественный механизм печати?

Еще раз спасибо за всю помощь, но мне все еще нужно больше. :)

Заранее спасибо.

http://rapidshare.com/files/311849636/Print_examples.zip.html

google-maps asp.net client-side printing-web-page
person Community    schedule 25.11.2009    source источник
comment
Любые идеи о том, почему пузырь исчезает в печати. ведь это только html   -  person Vaibhav Garg    schedule 25.11.2009

Ответы (5)


arrow_upward
1
arrow_downward

Единственный способ надежно предоставить высококачественную печатную версию того, что отображается на экране в многофункциональном веб-приложении, — это использовать клиентскую часть, скажем, JavaScript, для отправки серверу точной информации о текущем состоянии (где находятся пузырьки и т. д.). ) и используйте его для создания изображения, имитирующего позиционирование. Преобразуйте это изображение в PDF или что-то еще, а затем отправьте клиенту для загрузки.

person Rex M    schedule 25.11.2009
comment
это было бы слишком сложно. особенно с гугл картами. Получение тайлов на сервере может быть незаконным. В любом случае, по сравнению с этим методом, я думаю, что могу оставить обычный метод печати с подсказкой, чтобы сообщить пользователю, что снимок экрана будет производить более высокое качество... - person Vaibhav Garg; 25.11.2009

arrow_upward
2
arrow_downward

Вы пойдете на всю эту работу только для того, чтобы обнаружить, что простое приложение, такое как Snagit, сделает эту работу. Создание плагина SnagIt для захвата экрана

person Community    schedule 25.11.2009
comment
Я не понимаю. Разве snagit не является программным обеспечением, которое необходимо установить на клиенте? Его нельзя встроить в веб-страницу? - person Vaibhav Garg; 25.11.2009
comment
Я сомневаюсь, что вы когда-нибудь получите встроенный объект, который сможет получить доступ к холсту браузера и сделать его кросс-браузерным, кросс-совместимым с ОС. Вам нужно что-то, что работает с достаточным доступом к ОС, чтобы захватить холст. Вы говорите, что пробовали cutepdf. Ну, это тоже не встроено. - person ; 26.11.2009
comment
Извините, я использовал cutepdf только для того, чтобы увидеть качество печати из команды window.print() и опубликовать pdf в качестве образца здесь, чтобы показать отсутствующее информационное окно из печати и другие артефакты. - person Vaibhav Garg; 27.11.2009

arrow_upward
1
arrow_downward

У Google также есть API статических карт, который может дать хорошие результаты. Я сам однажды изучил это и не стал с ним работать, поскольку (в то время) были ограничения на количество точек, которые они могли поддерживать в ломаной линии.

person Paul Degnan    schedule 15.12.2009
comment
Спасибо за ссылку. Ограничение точек не должно быть проблемой, так как я использую пользовательский слой плитки. Я оставлю отзыв, если сочту его полезным - person Vaibhav Garg; 16.12.2009

arrow_upward
0
arrow_downward

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

person Nate B    schedule 25.11.2009
comment
Я не хочу передавать его на сервер, но пусть пользователь сохранит изображение и позже распечатает его. то, что делает window.print(), но с более высоким качеством - person Vaibhav Garg; 25.11.2009

arrow_upward
0
arrow_downward

Нет, хотя иногда это было бы очень удобно для сообщений об ошибках и так далее.

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

person svinto    schedule 16.12.2009