ASP.NET使用Jcrop实现头像在线编辑保存

利用swfupload上传头像,利用Jcrop来实现头像在线选择,然后提交个ashx对原头像进行剪切。代码如下:

default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Jcrop._default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jcrop测试</title>
    <script type="text/javascript" src="JS/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="JS/swfupload/swfupload.js"></script>
    <script type="text/javascript" src="JS/swfupload/handlers.js"></script>
    <script type="text/javascript" src="JS/Jcrop/js/jquery.Jcrop.min.js"></script>
    <script type="text/javascript" src="JS/Jcrop/js/jquery.color.js"></script>
    <script type="text/javascript" src="JS/mytest.js"></script>
    <link href="JS/Jcrop/css/jquery.Jcrop.min.css" rel="Stylesheet" type="text/css" />
    <link href="CSS/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
         var swfu;
         window.onload = function () {
             swfu = new SWFUpload({
                 upload_url: "imgUpload.ashx",
                 post_params: {
                     "ASP.NET_SESSIONID": "<%=Session.SessionID %>",
                     "ASPSESSID": "<%=Session.SessionID %>"
                 },

                 file_size_limit: "1024",
                 file_types: "*.jpg",
                 file_types_description: "JPG Images",
                 file_upload_limit: "-1",

                 file_queue_error_handler: fileQueueError,
                 file_dialog_complete_handler: fileDialogComplete,
                 upload_progress_handler: uploadProgress,
                 upload_error_handler: uploadError,
                 upload_success_handler: uploadSuccess,
                 upload_complete_handler: uploadComplete,

                 button_image_url: "/Image/swfupload/XPButtonNoText_160x22.png",
                 button_width: "160",
                 button_height: "22",
                 button_placeholder_id: "spanButtonPlaceHolder1",
                 button_text: '<span class="theFont">选择文件</span>',
                 button_text_style: ".theFont { font-size: 13;}",
                 button_text_left_padding: 12,
                 button_text_top_padding: 3,
                 button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE, //SWFUplaod.BUTTON_ACTION.SELECT_FILES 可以多选文件
                 flash_url: "/JS/swfupload/swfupload.swf",

                 custom_settings: {
                     upload_target: "divFileProgressContainer1"
                 },
                 debug: false
             });
         }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table>
        <tr>
            <td height="25" width="30%" align="right">
                用户头像 :
            </td>
            <td height="25" width="*" align="left">
                <div id="swfu_container1" style="margin: 0px 10px;">
                    <div>
                        <span id="spanButtonPlaceHolder1"></span>
                    </div>
                    <div id="divFileProgressContainer1" style="height: 75px;">
                    </div>
                    <div id="thumbnails1">
                        <div id="div_addPhoto">
                            <img alt="用户头像" id="img_UserPhoto1" name="img_UserPhoto1" />
                        </div>
                        <input type="hidden" runat="server" id="userphoto1" />
                    </div>
                    <div id="div_photoadd" style="width: 100px; height: 100px; overflow: hidden; display: none">
                        <img alt="用户头像" id="viewUserPhoto" />
                    </div>
                    <input type="button" id="btn_imgcut" style="display: none" onclick="checkCoords($('#x').val(), $('#y').val(), $('#w').val(), $('#h').val(), $('#userphoto1').val())"
                        value="剪切头像" />
                    <input type="hidden" id="x" name="x" />
                    <input type="hidden" id="y" name="y" />
                    <input type="hidden" id="w" name="w" />
                    <input type="hidden" id="h" name="h" />
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>


mytest.js

//*************头像剪切 Code By:5653325 http://blog.csdn.net/5653325*********************
var xy_x, xy_y;

function JcropInit() {
    $('#img_UserPhoto1').Jcrop({
        bgOpacity: 0.5,
        onChange: updateCoords,
        onSelect: updateCoords,
        keySupport: false,
        aspectRatio: 1,
        bgColor: 'white',
        addClass: 'jcrop-normal'
    }, function () {
        var xy = this.getBounds();
        xy_x = xy[0];
        xy_y = xy[1];
        api = this;
        api.setSelect([1, 1, 100, 100]);
        api.setOptions({ bgFade: true, bgColor: $.Jcrop.defaults.bgColor, bgOpacity: $.Jcrop.defaults.bgOpacity });
    });
};
function updateCoords(c) {
    if (parseInt(c.w) > 0) {
        var rx = 100 / c.w;
        var ry = 100 / c.h;
        $('#viewUserPhoto').css({
            width: Math.round(rx * xy_x) + 'px',
            height: Math.round(ry * xy_y) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
    }
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};
//头像剪切

function checkCoords(x, y, w, h, f) {
    if (x < 0 || y < 0 || w < 10 || h < 10) {
        alert('选择图片太小,无法剪切。');
        return false;
    }
    else {
        $.ajax({
            type: "POST",
            data: "cmd=cut&t=" + Math.random() + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&f=" + f,
            url: "imgCut.ashx",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "text",
            success: function (text) {
                var dataobj = eval(text);
                if (dataobj[0].count == 0) {
                    alert(dataobj[0].list[0].error);
                }
                else {
                    $('#div_addPhoto').empty();
                    $('#div_addPhoto').append("<img alt='用户头像' id='img_UserPhoto1' name='img_UserPhoto1' />");
                    $("#img_UserPhoto1").attr("src", dataobj[0].list[0].path + "?t=" + Math.random());
                    $("#viewUserPhoto").attr("src", dataobj[0].list[0].path + "?t=" + Math.random());
                    $("#div_photoadd").css("display", 'none');
                    $("#btn_imgcut").css("display", 'none');
                }
            },
            error: function (request, message, ex) {
                alert("错误:" + message);
            }
        });
    }
};

swfupload下的handler.js的某个函数修改

function uploadSuccess(file, serverData) {
    try
    {
        //*************头像剪切 Code By:5653325 http://blog.csdn.net/5653325*********************
        $('#div_addPhoto').empty();
        $('#div_addPhoto').append("<img alt='用户头像' id='img_UserPhoto1' name='img_UserPhoto1'  />");
        $("#img_UserPhoto1").attr("src", serverData + "?t=" + Math.random());
        $("#userphoto1").val(serverData);
        $("#viewUserPhoto").attr("src", serverData + "?t=" + Math.random());
        $("#div_photoadd").css("display", '');
        $("#btn_imgcut").css("display", '');
        JcropInit();
	} catch (ex) {
		this.debug(ex);
	}
}


图片上传ashx(imageupload.ashx)

<%@ WebHandler Language="C#" Class="imgUpload" %>

using System;
using System.Web;
using System.IO;
public class imgUpload : IHttpHandler
{
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string updir = context.Server.MapPath(@"~\Upload\userphoto") + "\\";
        if (context.Request.Files.Count > 0)
        {
            try
            {
                for (int j = 0; j < context.Request.Files.Count; j++)
                {
                    HttpPostedFile uploadFile = context.Request.Files[j];
                    if (uploadFile.ContentLength > 0)
                    {
                        if (!Directory.Exists(updir))
                        {
                            Directory.CreateDirectory(updir);
                        }
                        string extname = Path.GetExtension(uploadFile.FileName);
                        string fullname =Guid.NewGuid().ToString();
                        string filename = uploadFile.FileName;

                        uploadFile.SaveAs(string.Format("{0}{1}", updir, fullname + extname));                        
                        context.Response.Write(string.Format(@"/Upload/userphoto/{0}", fullname + extname));
                    }
                }
            }
            catch (Exception ex)
            {
                context.Response.Write("Message" + ex.ToString());
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}


图片剪切的ashx(imgcut.ashx)

<%@ WebHandler Language="C#" Class="imgCut" %>

using System;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.IO;
public class imgCut : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";       
        int x = 1, y = 1, w = 1, h = 1;
        string f = string.Empty;
        if (context.Request["x"] == null || context.Request["y"] == null || context.Request["w"] == null || context.Request["h"] == null)
        {
            context.Response.Write("[{count:0,list:[{\"error\":\"参数不正确。\"}]}]");
            context.Response.End();
        }
        if (context.Request["f"] == null)
        {
            context.Response.Write("[{count:0,list:[{\"error\":\"没有图片文件。\"}]}]");
            context.Response.End();
        }
        else
        {
            f = context.Request["f"].ToString().Replace("/", "\\");
        }
        try
        {
            x = int.Parse(context.Request["x"].ToString());
            y = int.Parse(context.Request["y"].ToString());
            w = int.Parse(context.Request["w"].ToString());
            h = int.Parse(context.Request["h"].ToString());
        }
        catch
        {
            context.Response.Write("[{count:0,list:[{\"error\":\"参数不能被识别。\"}]}]");
            context.Response.End();
        }
        if (!File.Exists(context.Server.MapPath("~\\" + f)))
        {
            context.Response.Write("[{count:0,list:[{\"error\":\"图片文件不存在。\"}]}]");
            context.Response.End();
        }

        Bitmap b;
        Graphics g;
        using (Image img = System.Drawing.Image.FromFile(context.Server.MapPath("~\\" + f)))
        {
            b = new Bitmap(w, h, img.PixelFormat);
            b.SetResolution(img.HorizontalResolution, img.VerticalResolution);
            g = Graphics.FromImage(b);
            g.InterpolationMode = InterpolationMode.HighQualityBicubic;
            g.PixelOffsetMode = PixelOffsetMode.Half; 
            g.DrawImage(img, new Rectangle(0, 0, w, h),new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
            img.Dispose();
        }
        string ff = context.Server.MapPath("~\\" + f);
        b.Save(ff);
        b.Dispose();
        g.Dispose();
        context.Response.Write("[{count:1,list:[{\"path\":\"" + f.Replace("\\", "/") + "\"}]}]");
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

附Jcrop的参数、API说明文档:

参数:

名称 默认值 说明
allowSelect true 允许新选框
allowMove true 允许选框移动
allowResize true 允许选框缩放
trackDocument true  
baseClass "jcrop" 基础样式名前缀。说明:class="jcrop-holder",更改的只是其中的 jcrop。
addClass null 添加样式会。例:假设值为 "test",那么会添加样式到 class="test jcrop-holder"
bgColor "black" 背景颜色。颜色关键字、HEX、RGB 均可。
bgOpacity 0.6 背景透明度
bgFade false 使用背景过渡效果
borderOpacity 0.4 选框边框透明度
handleOpacity 0.5 缩放按钮透明度
handleSize 9 缩放按钮大小
handleOffset 5 缩放按钮与边框的距离
aspectRatio 0 选框宽高比。说明:width/height
keySupport true 支持键盘控制。按键列表:上下左右(移动)、Esc(取消)、Tab(跳出裁剪框,到下一个)
cornerHandles true 允许边角缩放
sideHandles true 允许四边缩放
drawBorders true 绘制边框
dragEdges true 允许拖动边框
fixedSupport true  
touchSupport null  
boxWidth 0 画布宽度
boxHeight 0 画布高度
boundary 2 边界。说明:可以从边界开始拖动鼠标选择裁剪区域
fadeTime 400 过度效果的时间
animationDelay 20 动画延迟
swingSpeed 3 过渡速度
minSelect [0,0] 选框最小选择尺寸。说明:若选框小于该尺寸,则自动取消选择
maxSize [0,0] 选框最大尺寸
minSize [0,0] 选框最小尺寸
onChange function(){} 选框改变时的事件
onSelect function(){} 选框选定时的事件
onRelease function(){} 取消选框时的事件

API

名称 说明
setImage(string) 设定(或改变)图像。例:jcrop_api.setImage("newpic.jpg")
setOptions(object) 设定(或改变)参数,格式与初始化设置参数一样
setSelect(array) 创建选框,参数格式为:[x,y,x2,y2]
animateTo(array) 用动画效果创建选框,参数格式为:[x,y,x2,y2]
release() 取消选框
disable() 禁用 Jcrop。说明:已有选框不会被清除。
enable() 启用 Jcrop
destroy() 移除 Jcrop
tellSelect() 获取选框的值(实际尺寸)。例子:console.log(jcrop_api.tellSelect())
tellScaled() 获取选框的值(界面尺寸)。例子:console.log(jcrop_api.tellScaled())
getBounds() 获取图片实际尺寸,格式为:[w,h]
getWidgetSize() 获取图片显示尺寸,格式为:[w,h]
getScaleFactor() 获取图片缩放的比例,格式为:[w,h]


源码下载:http://download.csdn.net/detail/5653325/6488655

你可能感兴趣的:(jcrop,swfupload,头像剪切)