How to create url preview in JavaScript?

Question

Can someone help me with creation of a url previews in JavaScript?

What I mean is this: Say I have a link on my site, I want the user to be able to mouse over the link, and have an image pop up that shows what the target of the link looks like.

Don't worry about the css, I got that working, I just need the actual script to show the image.

Currently I am doing it by showing up an iframe that actually renders the page, but this is not scalable and looks ugly.

Having the page display premade images is not an option, since the links will be linking to dynamically generated user content.

Answer 1

You can do this using an iframe, or pay for a service that takes screenshots (Doctype.com offer this, I think). The paid service will still take a long time to generate screenshots. Basically, don't bother trying, it's not going to work.

Answer 2

Website previews cannot be generated on the client-side. The preview image needs to be rendered on the server, which can then be called into your HTML document with a simple <img> tag.

Basically you could have an image tag such as the following:

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

... where my_preview_renderer.php will generate the preview in realtime and return the image data with the appropriate mime-type. You can use any server side scripting language.

This is not an exhaustive answer, but I hope that it can point you to the right direction.

Answer 3

You need to have pre-stored images. Javascript cannot take screenshots and resize the images (for now). Try this: http://snapcasa.com/ . It takes images dynamically for you. All you have to do is to hot link the images :)

The best features when using http://snapcasa.com/:

1. Images are guaranteed to be most up-to-date

2. You don't have to store them on your server!

3. Free plan has lots of credits for you to burn!

Answer 4

Daniel is right there is no way the client could do this, but an option would be a free thumnail service; http://www.webresourcesdepot.com/10-free-website-thumbnail-generation-services/ combined with a nice tooltip script: http://flowplayer.org/tools/tooltip.html

Answer 5

If you want more direct control over your screenshots and want to configure things on the server, you can set up khtml2png or webkit2png* to generate images on the command line. (And here is some direction toward using Gecko if you prefer that.)

* webkit2png provides instructions for OS X, but there's really no reason it shouldn't work on *nix, being that WebKit itself is cross-platform. Figuring that out can be left as an exercise to the reader, but it may be worthwhile as KHTML has historically lagged behind WebKit for new (HTML5, CSS3, etc) features.

I haven't tested any of these solutions, but it might be enough to get started if you want more control over the screenshot generation.

Answer 6

A similar site to snapcasa is http://www.sitethumbshot.com/. for testing you can create free account.