Present a thumbnail image of a remote web site page in an asp.net mvc application

问题

I have been presented with the following requirement:

The user wants to type a link into a text box. Once he hits an OK button he would like a thumbnail of the web site (the link he just entered) to be presented in a div in the current web page. (For simplicity assume that the link exists)

The site is written in asp.net mvc and jquery. ( we can not use an asp.net control)

Any ideas will be very helpful.

Thanks in advance and be happy.

回答1:

You may find the following article on CodeProject useful. It explains how to generate a thumbnail screenshot of a website.

---

UPDATE:

Here's a sample implementation. Start by writing a controller action:

public ActionResult Thumbnail(string address)
{
    // TODO: Read the article I've linked about this component
    byte[] thumbnail = SomeSuperComponentThatTakesScreenShot(address);
    return File(thumbnail, "image/jpeg");
}

Now all that's left is to do the plumbing:

$(function() {
    $('#preview').click(function() {
        // When the preview button is clicked
        // get the address that the user entered:
        var address = $('#addressInput').val();

        // and generate a dynamic image inside a result div:
        var previewUrl = '<%= Url.Action("thumbnail") %>?address=' + 
                          encodeURIComponent(address);
        $('#result').html('<img src="' + previewUrl + '" alt="thumbnail" />');

        // Cancel any default actions and stop event propagations on the 
        // #preview button/link
        return false;
    });
});

来源：https://stackoverflow.com/questions/4381775/present-a-thumbnail-image-of-a-remote-web-site-page-in-an-asp-net-mvc-applicatio