ASP.NET Image Generation 實作圖片縮圖與浮水印

ASP.NET Image Generation 內建 ImageResizeTransform 類別支援尺寸調整，並允許繼承 ImageTransform 自訂轉換邏輯，是處理動態影像生成的利器。本文示範結合資料庫儲存的二進位圖片，即時產生縮圖並加入浮水印。

資料庫結構

CREATE TABLE t_images (
    image_id INT PRIMARY KEY,
    image_data IMAGE,
    last_modified_date DATETIME
)

前端頁面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="NET35Lab.GeneratedImage.Web._Default" %>
<%@ Register Assembly="Microsoft.Web.GeneratedImage" Namespace="Microsoft.Web" TagPrefix="cc1" %>
<html xmlns="https://www.w3.org/1999/xhtml">
<body>
    <form id="form1" runat="server">
        <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" 
            RepeatColumns="2" RepeatDirection="Horizontal" CellPadding="4" CellSpacing="4">
            <ItemTemplate>
                <cc1:GeneratedImage ID="GeneratedImage1" runat="server" 
                    ImageHandlerUrl="~/ImageHandler1.ashx"
                    Timestamp='<%# Eval("last_modified_date") %>'>
                    <Parameters>
                        <cc1:ImageParameter Name="imageid" Value='<%# Eval("image_id") %>' />
                    </Parameters>
                </cc1:GeneratedImage>
                <br />
            </ItemTemplate>
        </asp:DataList>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True;"
            ProviderName="System.Data.SqlClient"
            SelectCommand="SELECT [image_id], [image_data], [last_modified_date] FROM [t_images]">
        </asp:SqlDataSource>
    </form>
</body>
</html>

後端處理器

建立 ImageHandler1.ashx 繼承 ImageHandler，覆寫 ProcessRequest：

public class ImageHandler1 : ImageHandler
{
    public override void ProcessRequest(HttpContext context)
    {
        string imageId = context.Request.QueryString["imageid"];
        // 從資料庫讀取 image_data 位元組陣列
        byte[] imageData = GetImageFromDB(imageId);
        
        // 建立轉換管線：縮放 -> 加浮水印
        var transforms = new ImageTransform[]
        {
            new ImageResizeTransform(200, 150), // 寬 200px，高 150px
            new WatermarkTransform("© MySite", FontFamily.GenericSansSerif, 12, Color.White, 0.5f)
        };
        
        this.GenerateImage(context, imageData, transforms);
    }
}

自訂浮水印轉換類別

public class WatermarkTransform : ImageTransform
{
    private string _text;
    private FontFamily _fontFamily;
    private int _fontSize;
    private Color _color;
    private float _opacity;

    public WatermarkTransform(string text, FontFamily fontFamily, int fontSize, Color color, float opacity)
    {
        _text = text; _fontFamily = fontFamily; _fontSize = fontSize; _color = color; _opacity = opacity;
    }

    public override Image ProcessImage(Image source)
    {
        using (var g = Graphics.FromImage(source))
        {
            var font = new Font(_fontFamily, _fontSize);
            var brush = new SolidBrush(Color.FromArgb((int)(255 * _opacity), _color));
            var size = g.MeasureString(_text, font);
            var x = source.Width - size.Width - 10;
            var y = source.Height - size.Height - 10;
            g.DrawString(_text, font, brush, x, y);
        }
        return source;
    }
}

關鍵優勢

• 記憶體處理：無需產生暫存檔，直接串流輸出
• 快取支援：Timestamp 參數自動處理瀏覽器快取
• 管線擴充：新增轉換只需實作 ImageTransform
• 效能優化：內建輸出快取與壓縮

此架構適合電商商品圖、使用者頭像、文件預覽等需即時處理影像的場景，大幅簡化開發複雜度。