圖片切割系統

上一陣子做過一個圖片切割效果，得到很多人關注。其中有很多人向我詢問如何做一個真正的圖片切割（裁剪），這裏需要聲明一下：
首先js是不能操作客戶端文件的（除非特殊情況），所以圖片的切割必須在後臺處理，對於客戶端的圖片可以先上傳再切割或者把圖片和切割參數一起傳遞到服務器再處理（上傳文件不在本次討論範圍，請自行修改）；
還有是通過客戶端傳遞的參數來處理圖片，確實能得到展示圖或預覽圖的效果（這是針對有些提出在後臺處理的圖片得不到預覽圖的效果來說的），下面會舉例說明如何生成展示圖那樣的圖片。

程序說明

【客戶端部分】

客戶端部分詳細請參考圖片切割效果（建議沒有看過的先看那裏的例子），這裏說說要傳遞到後臺的參數，建議用GetPos獲取部分參數：

var p = ic.Url, o = ic.GetPos();
x = o.Left,
y = o.Top,
w = o.Width,
h = o.Height,
pw = ic._layBase.width,
ph = ic._layBase.height;

其中，ic.Url是圖片地址：ic.Url，o.Left是水平切割，o.Top是垂直切割點，o.Width是切割寬度，o.Height是切割高度，ic._layBase.width是圖片寬度，ic._layBase.height是圖片高度。

可以這樣傳遞這些參數：

$("imgCreat").src = "ImgCropper.ashx?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph + "&" + Math.random();

其中圖片地址、圖片寬度、圖片高度如果是預先設定好的話就可以不傳遞了。

【後臺部分】

後臺主要是進行圖片的處理和輸出。

【圖片切割】

在後臺獲取前臺傳遞的參數：

string Pic = Convert.ToString(context.Request["p"]);
int PointX = Convert.ToInt32(context.Request["x"]);
int PointY = Convert.ToInt32(context.Request["y"]);
int CutWidth = Convert.ToInt32(context.Request["w"]);
int CutHeight = Convert.ToInt32(context.Request["h"]);
int PicWidth = Convert.ToInt32(context.Request["pw"]);
int PicHeight = Convert.ToInt32(context.Request["ph"]);

然後就用這些參數對圖片進行切割了，先說說切割的原理，主要分兩部：切割和縮放。

切割和縮放的程序關鍵在這裏：

gbmPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, CutWidth, CutHeight), PointX * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, CutWidth * imgPhoto.Width / PicWidth, CutHeight * imgPhoto.Height / PicHeight, GraphicsUnit.Pixel);

首先是在原圖切割出需要的部分。切割需要的參數是PointX、PointY、CutWidth、CutHeight，因爲在客戶端的程序 中是可以縮放原圖來進行切割的，所以要在在切割原圖時需要先按比例縮放這些參數，還要注意PointX和CutWidth需要水平方向的比 例，PointY和CutHeight需要垂直方向的比例。例如（其中imgPhoto是原圖）：
水平切割點：PointX * imgPhoto.Width / PicWidth；
切割寬度：CutWidth * imgPhoto.Width / PicWidth；
垂直切割點：PointY * imgPhoto.Height / PicHeight；
切割高度：CutHeight * imgPhoto.Height / PicHeight。

用這些參數就可以對原圖進行切割了。

然後是縮放原圖。可以想象，當切割好原圖後，只要把圖寬高縮放到CutWidth和CutHeight就可以得到跟展示圖一樣的圖片了：

new Rectangle(0, 0, CutWidth, CutHeight), 

下面是處理圖片的程序：

    public MemoryStream ResetImg(string ImgFile, int PicWidth, int PicHeight, int PointX, int PointY, int CutWidth, int CutHeight)
    {
        Image imgPhoto = Image.FromFile(ImgFile);
        Bitmap bmPhoto = new Bitmap(CutWidth, CutHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);

        Graphics gbmPhoto = Graphics.FromImage(bmPhoto);
        gbmPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, CutWidth, CutHeight), PointX * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, CutWidth * imgPhoto.Width / PicWidth, CutHeight * imgPhoto.Height / PicHeight, GraphicsUnit.Pixel);

        MemoryStream ms2 = new MemoryStream();
        bmPhoto.Save(ms2, System.Drawing.Imaging.ImageFormat.Jpeg);

        imgPhoto.Dispose();
        gbmPhoto.Dispose();
        bmPhoto.Dispose();

        return ms2;
    }

當然對於不同的需求可能要生成的效果也不一樣，但只要能靈活運用對於一般的需求基本都能實現了。
如果需要保存圖片到服務器，那麼可以用下面的方法保存圖片：

bmPhoto.Save(文件物理路徑, System.Drawing.Imaging.ImageFormat.Jpeg);

【IHttpHandler】

程序通過ashx文件用IHttpHandler發送切割生成的圖片，參考使用.ashx文件處理IHttpHandler實現發送文本及二進制數據的方法：
“利用.ashx文件是一個更好的方法，這個文件類似於.aspx文件，可以通過它來調用HttpHandler類，從而免去了普通.aspx頁面的控件解析以及頁面處理的過程。這個文件特別適合於生成動態圖片，生成動態文本等內容。”

最後設置數據輸出類型context.Response.ContentType，並使用context.Response.OutputStream向客戶端輸出圖片數據：

context.Response.ContentType = "image/jpeg";
ResetImg(System.Web.HttpContext.Current.Server.MapPath(Pic), PicWidth, PicHeight, PointX, PointY, CutWidth, CutHeight).WriteTo(context.Response.OutputStream);

這個輸出數據的方法適合用在不需要回發的數據輸出中，例如ajax、動態圖片等，關於這方面更詳細的內容請看IHttpHandler接口。

下面是完整服務器端代碼：

<%@ WebHandler Language="c#" Class="ImgCropper_WebHandler" Debug="true" %>

using System;
using System.Web;
using System.Drawing;
using System.IO;

public class ImgCropper_WebHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string Pic = Convert.ToString(context.Request["p"]);
        int PointX = Convert.ToInt32(context.Request["x"]);
        int PointY = Convert.ToInt32(context.Request["y"]);
        int CutWidth = Convert.ToInt32(context.Request["w"]);
        int CutHeight = Convert.ToInt32(context.Request["h"]);
        int PicWidth = Convert.ToInt32(context.Request["pw"]);
        int PicHeight = Convert.ToInt32(context.Request["ph"]);

        context.Response.ContentType = "image/jpeg";
        ResetImg(System.Web.HttpContext.Current.Server.MapPath(Pic), PicWidth, PicHeight, PointX, PointY, CutWidth, CutHeight).WriteTo(context.Response.OutputStream);
    }
    
    public MemoryStream ResetImg(string ImgFile, int PicWidth, int PicHeight, int PointX, int PointY, int CutWidth, int CutHeight)
    {
        Image imgPhoto = Image.FromFile(ImgFile);
        Bitmap bmPhoto = new Bitmap(CutWidth, CutHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);

        Graphics gbmPhoto = Graphics.FromImage(bmPhoto);
        gbmPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, CutWidth, CutHeight), PointX * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, CutWidth * imgPhoto.Width / PicWidth, CutHeight * imgPhoto.Height / PicHeight, GraphicsUnit.Pixel);

        MemoryStream ms2 = new MemoryStream();
        bmPhoto.Save(ms2, System.Drawing.Imaging.ImageFormat.Jpeg);

        imgPhoto.Dispose();
        gbmPhoto.Dispose();
        bmPhoto.Dispose();

        return ms2;
    }


    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

各位有什麼建議或意見歡迎留言討論，由於涉及後臺操作，請下載完整實例測試。

下載完整測試實例（.net版本）
下載完整測試實例（asp版本）
ps：實例中沒有加入圖片，測試時請自己插入一張圖片（默認是1.jpg）。
ps2：應要求把asp版本加上了，但需要支持aspjpeg組件。

原地址：http://www.cnblogs.com/cloudgamer/archive/2008/10/05/ImgCropper_sys.html