web实现QQ头像上传截取功能

<script>
    function change() {
        var pic = document.getElementById("HeadPic"),
            file = document.getElementById("file");

        var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();

        // gif在IE浏览器暂时无法显示
        if (ext != ‘png‘ && ext != ‘jpg‘ && ext != ‘jpeg‘) {
            alert("图片的格式必须为png或者jpg或者jpeg格式！");
            return;
        }
        var isIE = navigator.userAgent.match(/MSIE/) != null,
            isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null;

        if (isIE) {

            file.select();
            file.blur();
            var reallocalpath = document.selection.createRange().text;

            // IE6浏览器设置img的src为本地路径可以直接显示图片
            if (isIE6) {
                pic.src = reallocalpath;
            } else {
                //// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
                //pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=‘crop‘,src=\"" + reallocalpath + "\")";
                //// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
                //pic.src = ‘data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==‘;
                //CutPic();
                $("#HeadForm").ajaxSubmit({
                    type: "POST",
                    url: "/AjaxCommon/UpPic/",
                    dataType: "text",
                    success: function (data) {
                        $("#HeadSrc").val(data);
                        $("#HeadPic").attr("src", "@ReadConfig.GetHostUrl("Host")" + data);
                        CutPic();
                    }
                });
            }

        } else {
            html5Reader(file);
        }
    }

    function html5Reader(file) {
        var file = file.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            var pic = document.getElementById("HeadPic");
            pic.src = this.result;
            $("#HeadForm").ajaxSubmit({
                type: "POST",
                url: "/AjaxCommon/UpPic/",
                dataType: "text",
                success: function (data) {
                    $("#HeadSrc").val(data);
                    CutPic();
                }
            });
            CutPic();
        };
    }
    function CutPic() {
        var $image = $(‘.img-container>img‘);
        var options = {
            aspectRatio: 5 / 2,
            preview: ‘.img-preview‘,
        };
        $image.cropper(options);
    }

    function SubmitHead() {
        $.NabianPost({
            url: "/Handler/CutImage.ashx",
            data: {
                filesrc: $("#HeadPic").attr("src"),
                top: parseInt($(".cropper-move").offset().top - $(".cropper-canvas").offset().top),
                left: parseInt($(".cropper-move").offset().left - $(".cropper-canvas").offset().left),
                height: parseInt($(".cropper-move").css("height")),
                width: parseInt($(".cropper-move").css("width")),
                HeadSrc: $("#HeadSrc").val()
            },
            callback: function (data) {
                if (data.status == "no") {
                    alert("对不起上传失败");
                } else {
                    alert("上传成功");
                    window.location.reload();
                }
            }
        });
    }
</script>

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Web;
using BCommon.common;
using BLL.BLL;
using Model.Model;

namespace www.nabian.com.Handler
{
    /// <summary>
    /// CutImage 的摘要说明
    /// </summary>
    public class CutImage : IHttpHandler, System.Web.SessionState.IRequiresSessionState
    {

        /// <summary>
        /// 对图像的裁减操作主入口
        /// </summary>
        /// <param name="context">所有HTTP请求的特定信息</param>
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/json";
            string fileSource = context.Request["filesrc"];
            //原文件路径和文件名

            //文件保存路径
            string HostUrl = ReadConfig.GetHostUrl("HostUrl");
            //minilogo的保存路径
            string path100 = ReadEnum.GetFilePath((int)FilePath.GYS_inLOGO100_40);
            string path200 = ReadEnum.GetFilePath((int)FilePath.GYS_inLOGO200_80);
            int cutY = int.Parse(context.Request["top"]); //Y轴坐标
            int cutX = int.Parse(context.Request["left"]); //X轴坐标
            int cutWidth = int.Parse(context.Request["width"]); //裁减宽度
            int cutHeight = int.Parse(context.Request["height"]); //裁减高度
            string HeadSrc = HostUrl + context.Request["HeadSrc"];
            //裁减后上传
            CutImg(HeadSrc, cutX, cutY, cutWidth, cutHeight, path100, "GYS_inLOGO100_40", context);
            CutImg(HeadSrc, cutX, cutY, cutWidth, cutHeight, path200, "GYS_inLOGO200_80", context);
            //如果文件存在，说明文件上传成功

            if (File.Exists(HostUrl + path100) && File.Exists(HostUrl + path200))
            {
                var user = (B_Com_User)context.Session["LoginUser"];
                var com = new B_Com_CompanyBLL().SelectByID(user.CompanyID.ToString());
                com.LogoUrl = HeadSrc;
                com.LogoMiddleUrl = path200;
                com.LogoSmallUrl = path100;
                if (new B_Com_CompanyBLL().UpdateLogoById(com))
                {
                    context.Response.Write("{\"status\":\"ok\"}");
                }
                else
                {
                    context.Response.Write("{\"status\":\"no\"}");
                }
            }
            else
            {
                context.Response.Write("{\"status\":\"error\"}");
            }
        }

        /// <summary>
        /// 从指定路径中获取图片，按照指定位置及大小截取相应的图片内容，并保存到指定路径下
        /// </summary>
        /// <param name="filepath">图片来源路径及文件名(已使用Server.MapPath)</param>
        /// <param name="cutX">裁减的起始X轴坐标</param>
        /// <param name="cutY">裁减的起始Y坐标</param>
        /// <param name="cutwidth">裁减的宽度</param>
        /// <param name="cutheight">裁减的高度</param>
        /// <param name="savepath">裁减后的图片名称，路径为上一级的images文件夹中</param>
        /// <param name="context">所有http特定的信息对象</param>
        void CutImg(string filepath, int cutX, int cutY, int cutwidth, int cutheight, string savepath, string fileName, HttpContext context)
        {
            //TODO 判断文件类型暂时未做


            //创建图像对象，由于web中有个image控件，会导致这个图像的类重复，需要带上使用命名空间
            System.Drawing.Image oldImage = System.Drawing.Image.FromFile(filepath);

            //创建一个指定宽高的图像对象
            System.Drawing.Image newImage = new Bitmap(cutwidth, cutheight);
            //创建存放截取图像的画布
            Graphics newGraphics = Graphics.FromImage(newImage);

            //创建矩形对象，裁减是就是照着这个矩形来裁减的
            Rectangle CutReatangle = new Rectangle(cutX, cutY, cutwidth, cutheight);
            //创建矩形对象，用于下面的指定裁减出来的图像在新画布上的显示情况
            Rectangle showRectangle = new Rectangle(0, 0, cutwidth, cutheight);
            //执行裁减操作
            newGraphics.DrawImage(oldImage, showRectangle, CutReatangle, GraphicsUnit.Pixel);

            //释放资源（除图像对象的资源）
            oldImage.Dispose();
            newGraphics.Dispose();
            DateTime time = DateTime.Now;
            CreateFile.CreateFolder(ReadConfig.GetHostUrl("HostUrl") + ReadConfig.GetHostUrl(fileName) + "\\" + time.Year + "\\" + time.Month + "\\" + time.Day + "\\");
            //保存新图到指定路径
            //newImage.Save(ReadConfig.GetHostUrl("HostUrl") + savepath, System.Drawing.Imaging.ImageFormat.Jpeg);
            if (fileName == "GYS_inLOGO100_40")
            {
                newImage.ImageWinvarOptions(ReadConfig.GetHostUrl("HostUrl") + savepath, 100, 40, 100);
            }
            else
            {
                newImage.ImageWinvarOptions(ReadConfig.GetHostUrl("HostUrl") + savepath, 200, 80, 100);
            }
            //释放新图像的资源，如果在保存前释放，会造成程序出错
            newImage.Dispose();

        }

        /// <summary>
        /// 判断原始文件后缀是否符合要求规范
        /// </summary>
        /// <param name="filepath">原始文件路径</param>
        /// <returns>true为符合</returns>
        bool CheckImageMime(string filepath)
        {
            int typeLastShow = filepath.LastIndexOf(‘.‘);
            string[] imageType = { "jpg", "gif", "png", "bmp" };
            for (int i = 0; i < imageType.Length; i++)
            {
                //如果有后缀名且后缀符合规范
                if (typeLastShow > 0 && imageType[i].Equals(filepath.Substring(typeLastShow + 1), StringComparison.OrdinalIgnoreCase))
                {
                    return true;
                }
            }

            return false;
        }

        /// <summary>
        /// 根据原始文件名返回前面加上操作时间的文件名
        /// </summary>
        /// <param name="filepath">原文件全名（路径+文件名称）</param>
        /// <returns>新的文件名称</returns>
        string NewFileName(string filepath)
        {
            //获取文件原名
            string oldFileName = filepath.Substring(filepath.LastIndexOf("\\") + 1);

            //获取操作时间，原使用的是yyyyMMddHHmmssffff
            string date = DateTime.Now.ToString("yyyyMMddHHmmss") + DateTime.Now.Millisecond.ToString();

            //新文件名
            string newFileName = date + oldFileName;
            return newFileName;
        }



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