present远程Web站点页面的一个asp.net MVC应用程序的缩略图 [英] Present a thumbnail image of a remote web site page in an asp.net mvc application

问题描述

我一直用以下要求psented $ P $：

I have been presented with the following requirement:

用户想要输入一个链接到一个文本框。
一旦他打一个OK按钮，他希望网站（他刚刚进入链接）的缩略图要在当前网页在一个div psented $ P $。 （为简单起见假定链路存在）

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)

该网站是写在asp.net的MVC和jQuery。 （我们不能用一个asp.net控制）

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

任何想法将是非常有益的。

Any ideas will be very helpful.

在此先感谢和快乐。

推荐答案

您可能会发现的在$ C $的CProject有用下面的文章。它说明了如何生成一个网站的缩略图屏幕截图。

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

更新：

下面是一个示例实现。通过编写一个控制器操作启动：

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

这篇关于present远程Web站点页面的一个asp.net MVC应用程序的缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！