好不容易完成了一个基于web2.0概念的项目管理系统，在系统的实现过程中用到了头像的缩放裁剪的功能模块，而且我发现在网络上很少有讨论这方面的文章，所以把我的实现方式贴出来，和大家分享一下，写的不好还请多多海涵。
我是用jquery ui的ui.draggable
实现的。当然，本文所实现的方法不局限于jquery ui，只要能实现拖动的功能，任何库都可以。我用的jquery ui的版本号是1.6，这个版本已经改了很多的bug，渐趋完善，老实说以前的有些版本代码bug非常多，现在代码质量有了一定的提高，尤其bug改了不少。这个ui库完全兼容jquery的语法，也就是说隐式迭代、超级强大的selector等都可以无缝的使用，这比起dojo，ext等组件库使用起来要更为方便和轻量些。
具体的使用情况如下：
(1)、初始状况：
 |
(2)、 缩放后：
|
(3)、 截取效果：
1、图片处理后台代码
要实现缩放和截取必须要知道原图片的width/height、缩放后后的图片实际的width/height、截取框的width/height和应截取距离左边(left)和顶部(TOP)的距离,代码如下，都加了注释了，不过这方面的代码网络上多的是。
图像处理C#代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
public class ImageHelp
{
/**//// <summary>
/// 获取图片中的各帧
/// </summary>
/// <param name="pPath">图片路径</param>
/// <param name="pSavePath">保存路径</param>
public void GetFrames(string pPath, string pSavedPath)
{
Image gif = Image.FromFile(pPath);
FrameDimension fd = new FrameDimension(gif.FrameDimensionsList[0]);
//获取帧数(gif图片可能包含多帧，其它格式图片一般仅一帧)
int count = gif.GetFrameCount(fd);
//以Jpeg格式保存各帧
for (int i = 0; i < count; i++)
{
gif.SelectActiveFrame(fd, i);
gif.Save(pSavedPath + "\\frame_" + i + ".jpg", ImageFormat.Jpeg);
}
}
/**//**/
/**//// <summary>
/// 获取图片缩略图
/// </summary>
/// <param name="pPath">图片路径</param>
/// <param name="pSavePath">保存路径</param>
/// <param name="pWidth">缩略图宽度</param>
/// <param name="pHeight">缩略图高度</param>
/// <param name="pFormat">保存格式，通常可以是jpeg</param>
public void GetSmaller(string pPath, string pSavedPath, int pWidth, int pHeight)
{
string fileSaveUrl = pSavedPath + "\\smaller.jpg";
using (FileStream fs = new FileStream(pPath, FileMode.Open))
{
MakeSmallImg(fs, fileSaveUrl, pWidth, pHeight);
}
}
//按模版比例生成缩略图（以流的方式获取源文件）
//生成缩略图函数
//顺序参数：源图文件流、缩略图存放地址、模版宽、模版高
//注：缩略图大小控制在模版区域内
public static void MakeSmallImg(System.IO.Stream fromFileStream, string fileSaveUrl, System.Double templateWidth, System.Double templateHeight)
{
//从文件取得图片对象，并使用流中嵌入的颜色管理信息
System.Drawing.Image myImage = System.Drawing.Image.FromStream(fromFileStream, true);
//缩略图宽、高
System.Double newWidth = myImage.Width, newHeight = myImage.Height;
//宽大于模版的横图
if (myImage.Width > myImage.Height || myImage.Width == myImage.Height)
{
if (myImage.Width > templateWidth)
{
//宽按模版，高按比例缩放
newWidth = templateWidth;
newHeight = myImage.Height * (newWidth / myImage.Width);
}
}
//高大于模版的竖图
else
{
if (myImage.Height > templateHeight)
{
//高按模版，宽按比例缩放
newHeight = templateHeight;
newWidth = myImage.Width * (newHeight / myImage.Height);
}
}
//取得图片大小
System.Drawing.Size mySize = new Size((int)newWidth, (int)newHeight);
//新建一个bmp图片
System.Drawing.Image bitmap = new System.Drawing.Bitmap(mySize.Width, mySize.Height);
//新建一个画板
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);
//设置高质量插值法
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
//设置高质量,低速度呈现平滑程度
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//清空一下画布
g.Clear(Color.White);
//在指定位置画图
g.DrawImage(myImage, new System.Drawing.Rectangle(0, 0, bitmap.Width, bitmap.Height),
new System.Drawing.Rectangle(0, 0, myImage.Width, myImage.Height),
System.Drawing.GraphicsUnit.Pixel);
/**////文字水印
System.Drawing.Graphics G = System.Drawing.Graphics.FromImage(bitmap);
System.Drawing.Font f = new Font("Lucida Grande", 6);
System.Drawing.Brush b = new SolidBrush(Color.Gray);
G.DrawString("Ftodo.com", f, b, 0, 0);
G.Dispose();
/**////图片水印
//System.Drawing.Image copyImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath("pic/1.gif"));
//Graphics a = Graphics.FromImage(bitmap);
//a.DrawImage(copyImage, new Rectangle(bitmap.Width-copyImage.Width,bitmap.Height-copyImage.Height,copyImage.Width, copyImage.Height),0,0, copyImage.Width, copyImage.Height, GraphicsUnit.Pixel);
//copyImage.Dispose();
//a.Dispose();
//copyImage.Dispose();
//保存缩略图
if (File.Exists(fileSaveUrl))
{
File.SetAttributes(fileSaveUrl, FileAttributes.Normal);
File.Delete(fileSaveUrl);
}
bitmap.Save(fileSaveUrl, System.Drawing.Imaging.ImageFormat.Jpeg);
g.Dispose();
myImage.Dispose();
bitmap.Dispose();
}
/**//**/
/**//// <summary>
/// 获取图片指定部分
/// </summary>
/// <param name="pPath">图片路径</param>
/// <param name="pSavePath">保存路径</param>
/// <param name="pPartStartPointX">目标图片开始绘制处的坐标X值(通常为)</param>
/// <param name="pPartStartPointY">目标图片开始绘制处的坐标Y值(通常为)</param>
/// <param name="pPartWidth">目标图片的宽度</param>
/// <param name="pPartHeight">目标图片的高度</param>
/// <param name="pOrigStartPointX">原始图片开始截取处的坐标X值</param>
/// <param name="pOrigStartPointY">原始图片开始截取处的坐标Y值</param>
/// <param name="pFormat">保存格式，通常可以是jpeg</param>
public void GetPart(string pPath, string pSavedPath, int pPartStartPointX, int pPartStartPointY, int pPartWidth, int pPartHeight, int pOrigStartPointX, int pOrigStartPointY)
{
string normalJpgPath = pSavedPath + "\\normal.jpg";
using (Image originalImg = Image.FromFile(pPath))
{
Bitmap partImg = new Bitmap(pPartWidth, pPartHeight);
Graphics graphics = Graphics.FromImage(partImg);
Rectangle destRect = new Rectangle(new Point(pPartStartPointX, pPartStartPointY), new Size(pPartWidth, pPartHeight));//目标位置
Rectangle origRect = new Rectangle(new Point(pOrigStartPointX, pOrigStartPointY), new Size(pPartWidth, pPartHeight));//原图位置（默认从原图中截取的图片大小等于目标图片的大小）
/**////文字水印
System.Drawing.Graphics G = System.Drawing.Graphics.FromImage(partImg);
System.Drawing.Font f = new Font("Lucida Grande", 6);
System.Drawing.Brush b = new SolidBrush(Color.Gray);
G.Clear(Color.White);
graphics.DrawImage(originalImg, destRect, origRect, GraphicsUnit.Pixel);
G.DrawString("Ftodo.com", f, b, 0, 0);
G.Dispose();
originalImg.Dispose();
if (File.Exists(normalJpgPath))
{
File.SetAttributes(normalJpgPath, FileAttributes.Normal);
File.Delete(normalJpgPath);
}
partImg.Save(normalJpgPath, ImageFormat.Jpeg);
}
}
/**//**/
/**//// <summary>
/// 获取按比例缩放的图片指定部分
/// </summary>
/// <param name="pPath">图片路径</param>
/// <param name="pSavePath">保存路径</param>
/// <param name="pPartStartPointX">目标图片开始绘制处的坐标X值(通常为)</param>
/// <param name="pPartStartPointY">目标图片开始绘制处的坐标Y值(通常为)</param>
/// <param name="pPartWidth">目标图片的宽度</param>
/// <param name="pPartHeight">目标图片的高度</param>
/// <param name="pOrigStartPointX">原始图片开始截取处的坐标X值</param>
/// <param name="pOrigStartPointY">原始图片开始截取处的坐标Y值</param>
/// <param name="imageWidth">缩放后的宽度</param>
/// <param name="imageHeight">缩放后的高度</param>
public void GetPart(string pPath, string pSavedPath, int pPartStartPointX, int pPartStartPointY, int pPartWidth, int pPartHeight, int pOrigStartPointX, int pOrigStartPointY, int imageWidth, int imageHeight)
{
string normalJpgPath = pSavedPath + "\\normal.jpg";
using (Image originalImg = Image.FromFile(pPath))
{
if (originalImg.Width == imageWidth && originalImg.Height == imageHeight)
{
GetPart(pPath, pSavedPath, pPartStartPointX, pPartStartPointY, pPartWidth, pPartHeight, pOrigStartPointX, pOrigStartPointY);
return;
}
Image.GetThumbnailImageAbort callback = new Image.GetThumbnailImageAbort(ThumbnailCallback);
Image zoomImg = originalImg.GetThumbnailImage(imageWidth, imageHeight, callback, IntPtr.Zero);//缩放
Bitmap partImg = new Bitmap(pPartWidth, pPartHeight);
Graphics graphics = Graphics.FromImage(partImg);
Rectangle destRect = new Rectangle(new Point(pPartStartPointX, pPartStartPointY), new Size(pPartWidth, pPartHeight));//目标位置
Rectangle origRect = new Rectangle(new Point(pOrigStartPointX, pOrigStartPointY), new Size(pPartWidth, pPartHeight));//原图位置（默认从原图中截取的图片大小等于目标图片的大小）
/**////文字水印
System.Drawing.Graphics G = System.Drawing.Graphics.FromImage(partImg);
System.Drawing.Font f = new Font("Lucida Grande", 6);
System.Drawing.Brush b = new SolidBrush(Color.Gray);
G.Clear(Color.White);
graphics.DrawImage(zoomImg, destRect, origRect, GraphicsUnit.Pixel);
G.DrawString("Ftodo.com", f, b, 0, 0);
G.Dispose();
originalImg.Dispose();
if (File.Exists(normalJpgPath))
{
File.SetAttributes(normalJpgPath, FileAttributes.Normal);
File.Delete(normalJpgPath);
}
partImg.Save(normalJpgPath, ImageFormat.Jpeg);
}
}
/**//// <summary>
/// 获得图像高宽信息
/// </summary>
/// <param name="path"></param>
/// <returns></returns>
public ImageInformation GetImageInfo(string path)
{
using (Image image = Image.FromFile(path))
{
return new ImageInformation { Width = image.Width, Height = image.Height };
}
}
public bool ThumbnailCallback()
{
return false;
}
}
public struct ImageInformation