web實現QQ頭像上傳截取功能

因爲最近一段時間比較忙，發現很久沒寫博客了，給你們分享下最近搞的logo上傳截取功能。在實現這個功能以前找了一些jq的插件，最後選定了cropper在github中能夠找到。

具體的思路是1：選擇上傳的圖片，在change事件中用form.jquery.js中的formajax異步提交表單，保存上傳的圖片

                 2：綁定cooper事件，對圖片進行選取。

                 3：獲得選中區域的座標，對圖片進行截取保存。

其中的難點是ie的兼容性問題，因爲本人也不是很好，就不獻醜了下面給你們附上代碼

頁面中的html

 <div class="input">

                    <div><span class="xuanze">選擇</span><input type="file" class="file" name="file" id="file" onchange="change()" /><span class="jpeg">支持jpg、jpeg、gif、png、bmp格式的圖片</span></div>
                    <div class="xiechneg">
                        <span class="daxc">
                            @{
                                var url = Model.LogoMiddleUrl == null ? "" : Model.LogoMiddleUrl;
                                var path200 = ReadConfig.GetHostUrl("Host") + url;
                            }
                            <img src="@path200" width="118" height="49" alt="" />
                        </span><i class="dxgou"></i><i class="dxcha"></i><span class="shuzi01">200*80 </span>
                        <span class="xiaoxc">
                            @{
                                var url1 = Model.LogoSmallUrl == null ? "" : Model.LogoSmallUrl;
                                var path100 = ReadConfig.GetHostUrl("Host") + url1;
                            }
                            <img src="@path100" width="95" height="38" alt="" />
                        </span><i class="xiaoxgou"></i><i class="xiaoxcha"></i><span class="shuzi02">100*40 </span>
                    </div>

                    <div class="yzhz">
                        <div class="xiaoyz">
                            <div class="img-container">

                                <img src="/Content/img/xtsz/xiaoyizi.jpg" width="400" height="280" alt="" id="HeadPic" />
                            </div>
                            <span class="logo">選擇本地照片，上傳編輯本身的LOGO</span>
                            <span class="qd" onclick="SubmitHead()">肯定</span>
                        </div>
                        <div class="ybXC">
                            <span class="lgyl">LOGO預覽</span>
                            <div class="img-preview preview-lg">
                            </div>
                            <div class="img-preview preview-md">
                            </div>

                        </div>
                    </div>
                </div>

cropper下載地址http://jquery-plugins.net/image-cropper-jquery-image-cropping-plugin

form.jquery.js的下載地址 http://malsup.com/jquery/form/#download

頁面的js

<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>

　　上傳圖片的方法

 public ActionResult UpPic()
        {
            var file = Request.Files["file"];
            if (file.ContentLength == 0)
            {
                return Content("請選擇文件");
            }
            if (file.ContentLength > 307200)
            {
                return Content("文件過大");
            }
            int width = 0; int height = 0;
            string path = ReadEnum.GetFilePath((int)FilePath.GYS_Logo);
            string HostUrl = ReadConfig.GetHostUrl("HostUrl");
            string finalPaht;
            Request.Files.Processing(HostUrl, path, 400, 280, 100, out finalPaht, "GYS_Logo", 11);
            string a = path;
            return Content(a);
        }

截取並保存截取後的圖片的handler

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;
            }
        }
    }
}

　　壓縮圖片的方法

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BCommon.common
{
    public static class ImageWinvar
    {
        /// <summary>
        /// 無損壓縮圖片
        /// </summary>
        /// <param name="img">原圖片的文件流</param>
        /// <param name="dFile">壓縮後保存位置</param>
        /// <param name="dHeight">高度</param>
        /// <param name="dWidth"></param>
        /// <param name="flag">壓縮質量 1-100</param>
        /// <returns></returns>
        public static bool ImageWinvarOptions(this Image img, string dFile, int dWidth, int dHeight, int flag)
        {
            ImageFormat tFormat = img.RawFormat;
            int sW = 0, sH = 0;
            //按比例縮放
            Size tem_size = new Size(img.Width, img.Height);
            if (tem_size.Width > dHeight || tem_size.Width > dWidth) //將**改爲c#中的或者操做符號
            {
                if ((tem_size.Width * dHeight) > (tem_size.Height * dWidth))
                {
                    sW = dWidth;
                    sH = (dWidth * tem_size.Height) / tem_size.Width;
                }
                else
                {
                    sH = dHeight;
                    sW = (tem_size.Width * dHeight) / tem_size.Height;
                }
            }
            else
            {
                sW = tem_size.Width;
                sH = tem_size.Height;
            }
            Bitmap ob = new Bitmap(dWidth, dHeight);
            Graphics g = Graphics.FromImage(ob);
            g.Clear(Color.WhiteSmoke);
            g.CompositingQuality = CompositingQuality.HighQuality;
            g.SmoothingMode = SmoothingMode.HighQuality;
            g.InterpolationMode = InterpolationMode.HighQualityBicubic;
            g.DrawImage(img, new Rectangle((dWidth - sW) / 2, (dHeight - sH) / 2, sW, sH), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel);
            g.Dispose();
            //如下代碼爲保存圖片時，設置壓縮質量
            EncoderParameters ep = new EncoderParameters();
            long[] qy = new long[1];
            qy[0] = flag;//設置壓縮的比例1-100
            EncoderParameter eParam = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, qy);
            ep.Param[0] = eParam;
            try
            {
                ImageCodecInfo[] arrayICI = ImageCodecInfo.GetImageEncoders();
                ImageCodecInfo jpegICIinfo = null;
                for (int x = 0; x < arrayICI.Length; x++)
                {
                    if (arrayICI[x].FormatDescription.Equals("JPEG"))
                    {
                        jpegICIinfo = arrayICI[x];
                        break;
                    }
                }
                if (jpegICIinfo != null)
                {
                    ob.Save(dFile, jpegICIinfo, ep);//dFile是壓縮後的新路徑
                }
                else
                {
                    ob.Save(dFile, tFormat);
                }
                return true;
            }
            catch
            {
                return false;
            }
            finally
            {
                img.Dispose();
                ob.Dispose();
            }
        }


    }
}