Как создать предварительный просмотр URL в JavaScript?

Question

Может кто-нибудь помочь мне с созданием предварительного просмотра URL в JavaScript?

Я имею в виду следующее: скажем, у меня есть ссылка на моем сайте, я хочу, чтобы пользователь мог навести указатель мыши на ссылку, и всплыло изображение, показывающее, как выглядит цель ссылки. *

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

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

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

Answer 1

Вы должны иметь предварительно сохраненные изображения. Javascript не может делать скриншоты и изменять размеры изображений (на данный момент). Попробуйте это: http://snapcasa.com/. Он принимает изображения динамически для вас. Все, что вам нужно сделать, это горячая ссылка на изображения:)

Лучшие функции при использовании http://snapcasa.com/:

1. Изображения гарантированно будут самыми современными

2. Вам не нужно хранить их на своем сервере!

3. В бесплатном плане есть много кредитов для вас!

Answer 2

Если вам нужен более прямой контроль над вашими скриншотами и вы хотите настроить что-либо на сервере, вы можете настроить khtml2png или webkit2png * для генерации изображений в командной строке. (И здесь - это какое-то направление к использованию Gecko, если вы предпочитаете это.)

* webkit2png предоставляет инструкции для OS X, но на самом деле нет никаких причин, по которым он не должен работать на * nix, поскольку сам WebKit является кроссплатформенным. Выяснить это можно в качестве упражнения для читателя, но это может быть полезно, поскольку KHTML исторически отстает от WebKit для новых (HTML5, CSS3 и т. Д.) Функций.

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

Answer 3

Даниэль прав, клиент никак не может это сделать, но одним из вариантов может стать бесплатный сервис thumnail; http://www.webresourcesdepot.com/10-free-website-thumbnail-generation-services/ в сочетании с хорошим скриптом подсказки: http://flowplayer.org/tools/tooltip.html

Answer 4

Предварительный просмотр веб-сайта не может быть создан на стороне клиента. Предварительное изображение должно быть отображено на сервере, которое затем можно вызвать в ваш HTML-документ с помощью простого тега <img>.

В принципе, у вас может быть тег изображения, например:

<img src="/my_preview_renderer.php?site=www.google.com" />

... где my_preview_renderer.php сгенерирует предварительный просмотр в реальном времени и вернет данные изображения с соответствующим mime-типом. Вы можете использовать любой язык сценариев на стороне сервера.

Это не исчерпывающий ответ, но я надеюсь, что он может указать вам правильное направление.

Answer 5

хорошо, я думаю, что так как все ответы здесь немного устарели, теперь вы можете сделать это, используя встроенные инструменты веб-набора в большинстве современных браузеров, используя webrtc или инструменты ffmpeg, доступные в js, такой подход можно сделать вминут

Answer 6

Вы можете сделать это, используя iframe, или оплатить услугу, которая делает снимки экрана (думаю, Doctype.com предлагает это). Платный сервис все еще займет много времени для создания скриншотов. По сути, не пытайтесь, это не сработает.