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

最新推荐文章于 2019-05-08 17:06:23 发布
最新推荐文章于 2019-05-08 17:06:23 发布
阅读量3.9k 收藏 1
点赞数 1
分类专栏： C# Jquery Jcrop ASP.NET 文章标签： Jcrop swfupload 头像剪切
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdw984/article/details/14004589
版权
ASP.NET 同时被 3 个专栏收录
40 篇文章 1 订阅
订阅专栏
C#
29 篇文章 0 订阅
订阅专栏
Jquery
11 篇文章 0 订阅
订阅专栏

利用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" οnclick="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说明文档：

参数：

名称默认值说明
allowSelecttrue允许新选框
allowMovetrue允许选框移动
allowResizetrue允许选框缩放
trackDocumenttrue 
baseClass"jcrop"基础样式名前缀。说明：class="jcrop-holder"，更改的只是其中的 jcrop。
addClassnull添加样式会。例：假设值为 "test"，那么会添加样式到 class="test jcrop-holder"
bgColor"black"背景颜色。颜色关键字、HEX、RGB 均可。
bgOpacity0.6背景透明度
bgFadefalse使用背景过渡效果
borderOpacity0.4选框边框透明度
handleOpacity0.5缩放按钮透明度
handleSize9缩放按钮大小
handleOffset5缩放按钮与边框的距离
aspectRatio0选框宽高比。说明：width/height
keySupporttrue支持键盘控制。按键列表：上下左右（移动）、Esc（取消）、Tab（跳出裁剪框，到下一个）
cornerHandlestrue允许边角缩放
sideHandlestrue允许四边缩放
drawBorderstrue绘制边框
dragEdgestrue允许拖动边框
fixedSupporttrue 
touchSupportnull 
boxWidth0画布宽度
boxHeight0画布高度
boundary2边界。说明：可以从边界开始拖动鼠标选择裁剪区域
fadeTime400过度效果的时间
animationDelay20动画延迟
swingSpeed3过渡速度
minSelect[0,0]选框最小选择尺寸。说明：若选框小于该尺寸，则自动取消选择
maxSize[0,0]选框最大尺寸
minSize[0,0]选框最小尺寸
onChangefunction(){}选框改变时的事件
onSelectfunction(){}选框选定时的事件
onReleasefunction(){}取消选框时的事件

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

踏平扶桑
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ASP.NET+uploadify+jcrop 实现AJAX头像裁剪 上传
04-29
ASP.NET 实现的用uploadify(uploadify-v2.1.4)上传图片，然后用jcrop裁剪需要的区域，然后上传到服务器中。 完整DEMO，放心下载。 浏览器兼容性没怎么测试，在chrome下没问题
ASP.NET使用Jcrop插件实现图片上传裁剪功能
cgs的博客
06-22 1297
一、需求 1.需求：在Web端实现上传图片功能的基础上，增加预览图片并裁剪图片功能。 2.未更改之前如下图所示： 3.更改后的功能，当点击浏览(原生input type='file'控件)选择图片上传后，可以调整裁剪框大小及位置，点击上传按钮实现裁剪并上传，点击确定后将裁剪后的图片路径赋值给父页面的文章缩略图后的input。 二、实现 1.思路：使用input type='hid
头像更改
flame的博客
05-08 3149
开发工具与关键技术：VS2015，ASP.NET MVC 作者：李煜 撰写时间：2019年5月7日 我们平时登录账号都会有头像，账号，密码这些，而账号和密码是最基本的东西，这里就说一下更改账户号，密码，头像，这些基本的代码。 下面看一个例子： 上面的例子中修改完信息点击保存更改完成 说到更改数据的那这就涉及到一个数据回填，涉及到数据库，这个不用多说，在数据库里每一个账号都有一个在整个数据表里...
Asp.net 头像的简单实现
weixin_33809981的博客
07-02 1270
1：创建数据库 Create Table ImageSave ( ID int PRIMARY KEY IDENTITY(1,1), Name nvarchar(50), img image ) 2：上传照片页关键代码 　　前台： <div> <asp:FileUpload ID="fileUpImage"...
使用Jcrop实现图片上传、剪裁和保存(ASP.NET)
jazywoo_在路上
02-12 2845
Jcrop是一款jquery图片裁剪插件，可以实现图片在线裁剪,达到和图像软件处理的效果,界面和操作也相当的人性化，只需要拖曳鼠标即可完成,部署到服务器也非常简单，在网站建设过程中轻易美化表单，并且改善用户体验，本文是Jcrop的中文文档手册。 入门 •下载当前版本  •放到页面相应的位置 •同时也需要加载jquery 加载顺序 •jQuery.js •Jcrop.js •
实现Asp.net mvc上传头像加剪裁功能
10-23
在Asp.net MVC框架中实现上传头像并添加剪裁功能是一项常见的需求，尤其是在用户注册、个人资料编辑等场景中。以下将详细讲解如何通过HTML、CSS、JavaScript以及C#来实现这一功能。 首先，我们需要在前端页面创建一...
使用JCrop 截取头像包含了后台处理代码 asp net c#
02-21
2.使用了JCrop插件 3.可以选择背景色 4.控制选择框为1:1的比例 5.设置了选择框的最大范围和最小范围 6.可以支持键盘上下左右箭头移动 7.可以切换图片上传到服务器后截取图片并返回客户端 8.图片上传是无刷新上传的">...
基于asp.net实现图片在线上传并在线裁剪功能
01-02
　接上一篇文章asp.net uploadify实现多附件上传功能完成后，又突然用到头像上传并在线裁剪。在网上找个众多例子都没有符合要求的，有一篇文章写的不错,Asp.Net平台下的图片在线裁剪功能的实现代码(源码打包),大家...
【ASP.NET编程知识】基于asp.net实现图片在线上传并在线裁剪功能.docx
最新发布
05-21
在ASP.NET编程中，实现图片在线上传并在线裁剪功能是一项常见的需求，尤其在网站开发中，比如用户头像设置、产品图片处理等场景。本文将介绍如何使用ASP.NET结合JavaScript库Jcrop和Uploadify来实现这一功能。 首先...
ASP.NET头像前剪切
11-01
ASP.NET下里用Jcrop+swfupload实现头像在线剪切。
asp.net头像上传源代码
07-24
asp.net头像上传源代码 asp.net头像上传 头像上传源代码 头像上传 图片上传源码
.net 头像上传及裁剪实例
07-01
头像上传及裁剪
JCrop经典Demo
09-11
比较全面的JCrop经典Demo，由浅入深，不同层次的5个实例，满足开发需要！
基于asp.net和jquery技术实现无刷新上传头像和图片剪裁
06-15
基于asp.net和jquery技术实现无刷新上传头像和图片剪裁 非常简单
.NET + Jcrop 实现在线裁图功能
hacke2' Blog
09-17 3372
最近有这样一个需求，因为一个门户网站首页展示图片很长但很矮，自己截图怕有不到位，所以利用JQUERY 的 Jcrop组件做了一个在线裁图的功能。             初始化   $('#oldpicImg').Jcrop({ onChange: showCoords, onSelect: showCo
ASP.NET简单实现APP中用户个人头像上传和裁剪
Happiness is everywhere
08-20 3604
  最近有个微信项目的用户个人中心模块中，客户要求用户头像不仅仅只是上传图片，还需要能对图片进行裁剪。考虑到flash在IOS和Android上的兼容性问题，于是想着能从js这块入手，在网上发现了devotion博主写的《适应各浏览器图片裁剪无刷新上传js插件》文章，从中受到些许启发，以此为参考，进行了简单的修改。   新建一个页面，代码如下： &lt;html xmlns="http:...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值