CODEWITHSUNDEEP
jqueryasp.net-mvcthumbnails
user425445
user425445

Reputation:

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.

Upvotes: 0

Views: 2689

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038950

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;
    });
});

Upvotes: 2

Related Questions