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

最新推荐文章于 2021-03-29 17:08:24 发布
最新推荐文章于 2021-03-29 17:08:24 发布
阅读量4k 收藏 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

踏平扶桑
关注
专栏目录
asp+asp.net HttpHandler 头像截图(asp头像截图)
03-19
NULL 博文链接：https://hipeace87.iteye.com/blog/724232
asp.net头像上传源代码
07-24
asp.net头像上传源代码 asp.net头像上传 头像上传源代码 头像上传 图片上传源码
asp.net 头像上传裁剪模块
记录、分享
12-13 1159
asp.net 头像上传裁剪模块<br /> <br /><br /> <br />1.界面演示<br />2.代码下载地址<br /> <br /><br /> 1.界面演示<br /> <br /><br /> 2.代码下载地址<br /> <br />http://xuqianghit.download.csdn.net/
Jcrop ，.net仿百度上传在线编辑头像
weixin_30394251的博客
02-02 81
（源码下载链接: http://pan.baidu.com/s/1pJVxMAn 密码: gbuz）个人习惯，代码不贴出来，自己去云盘下。 我们先看一下百度上传头像的页面。如下图。 再 看看我做的效果。 图1 图2 上面是我做出的效果，灰色是一个400X400的背景，图片会自动适应 （图1和图2 一个横向一个是纵向），宽度和高度始终能放入这个背景中。 介...
ASP.NET+uploadify+jcrop 实现AJAX头像裁剪 上传
04-29
ASP.NET 实现的用uploadify(uploadify-v2.1.4)上传图片，然后用jcrop裁剪需要的区域，然后上传到服务器中。 完整DEMO，放心下载。 浏览器兼容性没怎么测试，在chrome下没问题
实现Asp.net mvc上传头像加剪裁功能
10-23
在Asp.net MVC框架中实现上传头像并添加剪裁功能是一项常见的需求，尤其是在用户注册、个人资料编辑等场景中。以下将详细讲解如何通过HTML、CSS、JavaScript以及C#来实现这一功能。 首先，我们需要在前端页面创建一...
【ASP.NET编程知识】基于asp.net实现图片在线上传并在线裁剪功能.docx
最新发布
05-21
在ASP.NET编程中，实现图片在线上传并在线裁剪功能是一项常见的需求，尤其在网站开发中，比如用户头像设置、产品图片处理等场景。本文将介绍如何使用ASP.NET结合JavaScript库Jcrop和Uploadify来实现这一功能。 首先...
基于asp.net实现图片在线上传并在线裁剪功能
01-02
　接上一篇文章asp.net uploadify实现多附件上传功能完成后，又突然用到头像上传并在线裁剪。在网上找个众多例子都没有符合要求的，有一篇文章写的不错,Asp.Net平台下的图片在线裁剪功能的实现代码(源码打包),大家...
使用JCrop 截取头像包含了后台处理代码 asp net c#
02-21
2.使用了JCrop插件 3.可以选择背景色 4.控制选择框为1:1的比例 5.设置了选择框的最大范围和最小范围 6.可以支持键盘上下左右箭头移动 7.可以切换图片上传到服务器后截取图片并返回客户端 8.图片上传是无刷新上传的">...
ASP.NET头像前剪切
11-01
ASP.NET下里用Jcrop+swfupload实现头像在线剪切。
AspNet头像无刷新上传头像
12-28
AspNet头像无刷新上传头像,具体请看代码
asp.net实现图片上传
12-01
asp.net实现图片上传，支持多图上传，可预览，操作方便。
ASP.NET上传图片并截图
06-14
ASP.NET上传图片并截图,使用特别简单，含普通和MVC3案例，详细配置和效果，请看博文：http://blog.csdn.net/risingsun001/article/details/9093493
jcrop demo
05-08
jcrop图片截取控件,用于做图片截取上传使用！
ASP.NET简单实现APP中用户个人头像上传和裁剪
Happiness is everywhere
08-20 3659
  最近有个微信项目的用户个人中心模块中，客户要求用户头像不仅仅只是上传图片，还需要能对图片进行裁剪。考虑到flash在IOS和Android上的兼容性问题，于是想着能从js这块入手，在网上发现了devotion博主写的《适应各浏览器图片裁剪无刷新上传js插件》文章，从中受到些许启发，以此为参考，进行了简单的修改。   新建一个页面，代码如下： &lt;html xmlns="http:...
上传头像（上传图片）.net 原码（方法二）
昕颖的专栏
07-15 4121
     uplogoimage.aspx前台代码:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >    上传头像                                        uplogoimage.aspx后台代码
asp.net下如何在数据库中存取图片
sweetping的专栏
01-01 643
 数据库中存取图片有两中方法：一种：先上传文件到服务器的指定文件夹下在吧文件路径（文件名）插入数据库中 读取的时候直接读取。二种：吧图片转换城二进制流在插入数据库中（sqlserver数据库中有个Image型可以存放图片类文件）。看程序例子吧。这个是页面文件。Default.aspx  http://www.w3.org/TR/xhtml1/DTD/xhtml1
asp上传头像mysql,asp 怎么在注册页面上传头像和保存头像到数据库
weixin_39812046的博客
03-29 128
asp 怎么在注册页面上传头像和保存头像到数据库mip版关注:189答案:2悬赏:0解决时间 2021-02-24 06:57已解决2021-02-23 11:05注册表functionEn(){vartext1=document.getElementById("UN").value;if(text1==""){...
Asp.Net实现图片在线裁剪功能详解
“Asp.Net平台下的图片在线...通过这种方式，Asp.Net平台可以实现一个完整的图片在线裁剪功能，为用户提供直观、便捷的图片编辑体验。同时，这种方案也具有良好的灵活性和可扩展性，可以根据项目需求进行定制和优化。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

踏平扶桑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值