¿Cómo crear una vista previa de url en JavaScript?

Question

¿Alguien me puede ayudar con la creación de una vista previa de URL en JavaScript?

Lo que quiero decir es esto: Digamos que tengo un enlace en mi sitio, quiero que el usuario pueda pasar el mouse por encima del enlace, y tener una imagen emergente que muestra cómo se ve el objetivo del enlace.

No se preocupe por el CSS, lo conseguí, solo necesito el script para mostrar la imagen.

Actualmente lo estoy haciendo mostrando un iframe que realmente muestra la página, pero esto no es escalable y se ve feo.

Hacer que la página muestre imágenes prefabricadas no es una opción, ya que los enlaces se vincularán al contenido del usuario generado dinámicamente.

Answer 1

Necesita tener imágenes almacenadas previamente. Javascript no puede tomar capturas de pantalla y cambiar el tamaño de las imágenes (por ahora). Pruebe esto: http://snapcasa.com/. Toma imágenes dinámicamente para ti. Todo lo que tiene que hacer es conectado por las imágenes :)

Las mejores características cuando se utiliza http://snapcasa.com/:

1. Las imágenes se garantiza que sea más actualizada al día

2. Usted don' ¡Tengo que almacenarlos en tu servidor!

3. ¡El plan gratuito tiene muchos créditos para quemar!

Answer 2

Puede hacer esto usando un iframe, o pagar por un servicio que toma capturas de pantalla (Doctype.com ofrece esto, creo). El servicio pago tardará mucho tiempo en generar capturas de pantalla. Básicamente, no te molestes en intentarlo, no va a funcionar.

Answer 3

Las vistas previas del sitio web no se pueden generar en el lado del cliente. La imagen de vista previa debe presentarse en el servidor, que luego se puede llamar a su documento HTML con una simple etiqueta <img>.

Básicamente, usted podría tener una etiqueta de imagen como la siguiente:

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

... my_preview_renderer.php donde va a generar la vista previa en tiempo real y devolver los datos de imagen con el tipo MIME adecuado. Puede usar cualquier lenguaje de scripting del lado del servidor.

Esta no es una respuesta exhaustiva, pero espero que pueda orientarlo en la dirección correcta.

Answer 4

Daniel está de acuerdo en que no hay manera de que el cliente pueda hacer esto, pero una opción sería un servicio de publicación gratuito; http://www.webresourcesdepot.com/10-free-website-thumbnail-generation-services/ combinado con un buen guión sobre herramientas: http://flowplayer.org/tools/tooltip.html

Answer 5

Si desea un control más directo sobre sus capturas de pantalla y desea configurar las cosas en el servidor, puede configurar khtml2png o webkit2png * para generar imágenes en la línea de comandos. (Y here es una dirección hacia el uso de Gecko si lo prefiere).

* webkit2png proporciona instrucciones para OS X, pero realmente no hay ninguna razón por la que no debería funcionar en * nix, ya que WebKit es multiplataforma.Pensar en eso puede dejarse como un ejercicio para el lector, pero puede valer la pena ya que KHTML históricamente ha quedado rezagado detrás de WebKit en cuanto a nuevas características (HTML5, CSS3, etc.).

No he probado ninguna de estas soluciones, pero podría ser suficiente para empezar, si desea tener más control sobre la generación pantalla.

Answer 6

Bueno, creo que como todas las respuestas aquí son un poco antiguas, ahora puedes hacerlo usando las herramientas integradas del kit web en la mayoría de los navegadores actuales, usando webrtc o las herramientas ffmpeg disponibles en js. en minutos