ASP.NET – Chụp ảnh trang web với WebBrower Control

Tôi từng giới thiệu phương pháp sử dụng WebBrower control (IE) để chụp ảnh trang web trong ứng dụng WinForms. Đối với ứng dụng Web ASP.NET, bạn cũng có thể làm điều tương tự bằng cách sử dụng WebBrower control trong assembly System.Windows.Forms.

Ứng dụng mà tôi sẽ thực hiện có công dụng chụp ảnh của trang web và cho phép người dùng xác định kích thước ảnh xuất ra. Có thể coi đây là một ứng dụng để lấy ảnh thumbnail của trang web.

Download

ASP.NET - Web Screen Capture Demo

 

Trước tiên, bạn tạo một ứng dụng ASP.NET Web Application và thêm tham chiếu đến assembly System.Windows.Forms bằng cách mở tập tin web.config và thêm mục assemblies như bên dưới:

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
      </assemblies>
    </compilation>
	...
	</system.web>
	...
</configuration>

Tạo lớp WebImageCapture

Lớp này có mục đích tạo một Thread dạng STA (single-threaded apartment) để chạy WebBrowser. WebBrowser này sẽ được thay đổi kích thước theo tùy chọn của người dùng và nạp trang web theo url. Ta sẽ đợi việc tải trang của WebBrower kết thúc bằng cách dùng vòng lặp kiểm tra liên tục và giữ cho ứng dụng luôn hoạt động bình thường (tiếp tục thực hiện mọi thông điệp được gửi đến cửa sổ WebBrower) bằng cách gọi Application.DoEvents().

Khi tạo lớp này, bạn hãy đặt nó trong thư mục App_Code.

using System;
using System.Drawing;
using System.Threading;
using System.Web;
using System.Windows.Forms;

public class WebImageCapture
{
    public static Image GetThumbnail(string url, int width, int height, int thumbWidth, int thumbHeight)
    {
        const int WAIT_TIME = 2000000;
        Bitmap bmp = null;

        var count = 0;
        Thread t = new Thread(() =>
        {
            using (WebBrowser browser = new WebBrowser())
            {

                // resize browser
                browser.ClientSize = new Size(width, height);
                // hide scrollbars
                browser.ScrollBarsEnabled = false;
                // disable showing dialog for script error message
                browser.ScriptErrorsSuppressed = true;
                browser.Navigate(url);

                // Keep waiting until the WebBrower completed page loading
                while (browser.ReadyState != WebBrowserReadyState.Complete)
                {
                    Application.DoEvents();
                    count++;
                    if (count == WAIT_TIME)
                        break;
                }

                // draw content of brower to bitmap
                bmp = new Bitmap(width, height);
                browser.DrawToBitmap(bmp, new Rectangle(0, 0, width, height));
            }
        });

        // Set this thread as a single-threaded apartment (STA)
        t.SetApartmentState(ApartmentState.STA);
        t.Start();
        t.Join();
        return bmp.GetThumbnailImage(thumbWidth, thumbHeight, null, IntPtr.Zero);
    }
}

Tạo các trang .aspx

Ứng dụng này sẽ gồm hai trang .aspx hoạt động như hình minh họa sau:

ASP.NET - WebThumbnailCapture

Default:

<%@ Page ClientIDMode="AutoID" Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebShot._Default" %>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent" ClientIDMode="Static">
    <h2>
        Welcome to ASP.NET!
    </h2>

    <form action="">
    <fieldset  style="float: left;">

    <p>
        URL:<input id="url" name="url" type="url" required value="https://yinyangit.wordpress.com"/>
    </p>
    <p>
        Width: <input id="width" name="width" required value="1024"/>
    </p>
    <p>
        Height : <input id="height" name="height" required value="768"/>
    </p>
    <p>
        Thumbnail Width : <input id="thumbWidth" type="number" name="thumbWidth" required value="400"/>
    </p>
    <p>
        Thumbnail Height : <input id="thumbHeight" name="thumbHeight" type="number" required value="300"/>
    </p>
    <p>
    <input type="submit" value="Capture"/>
    </p>
    </fieldset>
    </form>

    <div style="text-align: center; float: right;width:500px">
        <img id="loading" alt="" style="display:none;margin-top: 100px;" src="Images/loading.gif" />
        <img id="thumbnail" alt="" style="display:none;" src="" />
    </div>
    <script>
        $(function () {

            $("form").submit(function () {
                $("#thumbnail").hide();
                $("#loading").show();

                var url = $("#url").val();
                var width = $("#width").val();
                var height = $("#height").val();
                var thumbWidth = $("#thumbWidth").val();
                var thumbHeight = $("#thumbHeight").val();
                var src = "GetThumbnail.aspx?_=" + new Date().getTime() + "&url=" + url + "&width=" + width + "&height=" + height + "&thumbWidth=" + thumbWidth + "&thumbHeight=" + thumbHeight;

                $("#thumbnail").load(function () {
                    $("#loading").hide();
                    $(this).show();
                });
                $("#thumbnail").attr("src", src);

                return false;
            });

        });
    </script>
</asp:Content>

GetThumbnail.aspx:

<%@ Page Language="C#" %>
 <%
     var url            = Request.QueryString["url"];
     var width          = Convert.ToInt32(Request.QueryString["width"]);
     var height         = Convert.ToInt32(Request.QueryString["height"]);
     var thumbWidth     = Convert.ToInt32(Request.QueryString["thumbWidth"]);
     var thumbHeight    = Convert.ToInt32(Request.QueryString["thumbHeight"]);

     var img = WebImageCapture.GetThumbnail(url, width, height, thumbWidth, thumbHeight);
     Response.ContentType = "image/png";
     img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png);
 %>
 

YinYangIt’s Blog

Advertisements

3 thoughts on “ASP.NET – Chụp ảnh trang web với WebBrower Control

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s