Html / CSS制作网站的实时图片

Question

I was looking to making a link on a website a live changing picture of wherever the link is taking it to.

For example: I have a link to Page A, so the picture will show the page A. If I want to change the color of Page A, I would not have to change any code on the link picture but just the code for the color on the page and the picture will so the color change.

Answer 1

You could use a commercial service like Shrink The Web who will provide an API for this feature. It's a lot more intensive than just a bit of CSS/HTML..

Answer 2

You could just use a small iframe . I would layer a link over the top of it to prevent any interactions with that page itself. Otherwise, scraping a screenshot will require more than just HTML and CSS.

Answer 3

if i understood your question correctly, these are the possibilities for your problem.

1. Use Iframes, so that you can change the source of iframe with your changes and it will be reflected in every where it is used.
2. If you are using Jquery, knockout or any template engine, then you can create a template. so that you can change it and reuse it.

Answer 4

There are free tools which do this,

you won't need to change the image, but they use cache and you may need to refresh the request to update image

1. http://mozshot.nemui.org/
2. http://www.websnapr.com/

they are very simple to use, as this link shows a very small shot of google and you can use at in a html img tag: http://mozshot.nemui.org/shot/small?http://www.google.com/

My suggestion:

The first one (mozshot) is open source, so you could simply download and edit it, put it on your own website to update the image frequently or even after each refresh (which would be live but takes a lot of resource)

here is the source code for mozshot: http://github.com/sugi/mozshot

Hope this helps