自定义头像处理，轻巧实用，很多强大的小技巧在里面哦，快来赞美我一下吧^_^

本篇介绍的方法代码，都是摘出来的要点，其他的东西大家需要的话，自己补全吧。

注意下面页面代码里，每一个注释几乎都是讲的一个实用而又强大有趣的技巧哦！！看到这些，有没有人会激动下下，给点赞美呢^_^

/*
 * 用到的几个样式
 */
<style>
    /* 全兼容的图像自动垂直居中的关键样式哦^_^   */
    .imgmid {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        height: 100%;
        width: 1px;
        margin-left: -1px;
        vertical-align: middle;
    }
    /* 图片等比自适应大小的css实现，只要设定最大宽度最大高度就可以了，比用JS实现来的方便轻巧高效多了吧^_^  */
    .autoSize {
        max-width: 360px;
        max-height: 240px;
        vertical-align: middle;
    }
    .activeImg {
        position: absolute;
    }
	/* 方块状的容器，只显示圆形区域的样式哦^_^   */
    .showImg {
        width: 100px;
        height: 100px;
        display: none;
        position: relative;
        overflow: hidden;
        float: left;
        border-radius: 50%;
        behavior: url(css/PIE.htc);
        float:left;
        clear:right;
    }
</style>
<form method="post" id="fmPhoto" target="hidFrame" enctype="multipart/form-data" action="ReciveUpload">
    <div class="fmc">
	    /* 无刷新表单提交的关键——隐藏的iframe，表单的target指向这个隐藏的iframe */
        <iframe id="hidFrame" name="hidFrame" style="display:none"></iframe>
        <div style="width: 360px; height: 240px; position: relative; float:left;">
            <div style="width: 360px; height: 240px; position: relative; overflow: hidden; float: left; text-align:center;">
                <img alt="图片格式为jpg,最大为2M" id="imgPhoto" src="@srcPhoto" class="autoSize" /><span class="imgmid"></span>/*这个span就是图片垂直居中的关键*/
            </div>
            <img alt="" id="imgScroll" src="~/Images/img_scroll.png" style="z-index: 100; left: 0; top: 0; position: absolute;" />
        </div>
        <div class="showImg">
            <img alt="" id="imgShow" src="@srcPhoto" style="position: absolute;" />
        </div>
        <div style="color:Gray;clear:left; margin-bottom:20px;">图片格式为jpg，图片最大为2M</div>
		/* 可以自定义样式的file控件，就是这么简单，自定义一个div,然后里面放一个占满大小的全透明file标签，怎么样，崇拜我吧^_^ */
        <div style ="border:1px solid gray;position:relative; width:100px; height:40px;line-height:40px; text-align:center; vertical-align:middle;font-size:18px;">请选择图像
            <input type="file" id="fileUpload" name="ImageFile" style="position: absolute; width: 100%; height: 100%; filter: alpha(opacity=0); opacity: 0; top: 0; left: 0;" />
        </div>
        <input type="hidden" id="ImgWidth" name="ImgWidth" />
        <input type="hidden" id="ImgHeight" name="ImgHeight" />
        <input type="hidden" id="ImgTop" name="ImgTop" />
        <input type="hidden" id="ImgLeft" name="ImgLeft" />
    </div>
    <div class="mb">
        <input type="submit" class="lang-btn" id="btnSubmit" value="确定" />
        <a href="javascript:;" class="lang-btn lang-btn-huge lang-cancel mlw">取消</a>
    </div>
</form>
<script type="text/javascript">
    //自定义光标
    //document.body.style.cursor = "url('http://bbb.com/images/cur.cur')";
    function UploadCallBack(msg) {
        if (msg.indexOf("上传图片出错") == -1) {
		    // 图片样式清理（防止新加载的图片受影响），再加上必须的样式
            $("#imgPhoto").removeAttr("width").removeAttr("height").removeAttr("style").removeClass("activeImg").addClass("autoSize").attr("src", msg);
            $("#imgShow").attr("src", msg);
        } else {
            alert("系统忙，请稍后再试！");
        }
    }
	// 图片缩放和移动的代码，也是超简单吧，
	// 相比网上那些封装好的代码控件，动不动就是几本JS，复杂得要死，又难以维护，
	// 我这个实现，算是一个贡献吧,还有助于初学者学习和开启智慧^_^
    $(function () {
        var img = $("#imgScroll");
        var obj = $("#imgPhoto");
        var isMove = false;
        var x = y = 0;
        img.on("click", function (event) {
            if (isMove) {
                isMove = false;
                obj.css("cursor", "default");
                $(".showImg").hide();
            } else {
                isMove = true;
                img.css("cursor", "move");
                obj.attr("width", obj.width()).attr("height", obj.height()).removeClass("autoSize").addClass("activeImg").css({ top: obj.css("top"), left: obj.css("left") });
                var left = obj.css("left") == "auto" ? 0 : obj.css("left");
                var top = obj.css("top") == "auto" ? 0 : obj.css("top");
                x = event.pageX - parseInt(left);
                y = event.pageY - parseInt(top);
                $("#imgShow").attr("width", obj.width()).attr("height", obj.height()).css({ top: obj.css("top") - 70, left: obj.css("left") - 130 });
                $(".showImg").show();
            }
        }).on("mouseout", function () {
            isMove = false;
            obj.css("cursor", "default");
            $(".showImg").hide();
        }).on("mousewheel", function (event) {
            var wm = event.originalEvent.wheelDelta > 0 ? 1 : -1;
            var width = obj.width() * (10 + wm) / 10;//可适合修改
            var height = obj.height() * (10 + wm) / 10;
            if (width > 100 && height > 100) {
                obj.width(width).css({ "left": (180 - (width / 2)) });
                obj.height(height).css({ "top": (120 - (height / 2)) });
                $("#imgShow").width(width).height(height).css({ top: 50 - (height / 2), left: 50 - (width / 2) });
                $(".showImg").show();
            }
        });
        $(document).mousemove(function (e) {
            if (isMove) {
                obj.css({ top: e.pageY - y, left: e.pageX - x });
                $("#imgShow").css({ top: e.pageY - y - 70, left: e.pageX - x - 130 });
            }
        });

		// file控件响应事件
        $("#fileUpload").change(function () {
            var tmp = this.value.split('\\');
            var fileName = tmp[tmp.length - 1].split('.');
            document.forms["fmPhoto"].submit();
        });

	    // 表单验证和ajax提交，
        var valid = $("#fmPhoto").validate({
            submitHandler: function () {
                $("#ImgWidth").val(obj.width());
                $("#ImgHeight").val(obj.height());
                $("#ImgTop").val(70 - parseInt(obj.css("top"), 10));
                $("#ImgLeft").val(130 - parseInt(obj.css("left"), 10));
                $.ajax({
                    url: "http://localhost:22397/Home/Photo",
                    cache: false,
                    type: "post",
                    data: $("#fmPhoto").serialize(),
                    success: function (result) {
                        if (!result) {
                            var errormap = { SystemMsg: "系统忙，请稍后再试！" };
                            valid.showErrors(errormap, valid.errorlist);
                        } else {
                            if (result.Msg) {
                                valid.showErrors(result.Msg.Map, valid.errorlist);
                            } else {
                                $("#imgUserPhoto").attr("src", result.VirtualPath + result.Name);
                            }
                        }
                    }
                });
            },
            rules: {
                Name: {
                    required: true,
                }
            }
        });
    });
</script> 

这个后台切图的方法，大家看注释就行了，没什么好说的，就是一个参照

/// <summary>
/// 根据参数切图方法，包含图片缩放信息，确保切的就是当时选中的那部分样子
/// </summary>
/// <param name="image">  源图</param>
/// <param name="sWidth"> 源图缩放后的宽度</param>
/// <param name="sHeight">源图缩放后的高度</param>
/// <param name="left">   新图相对源图的左坐标</param>
/// <param name="top">    新图相对源图的上坐标</param>
/// <param name="width">  新图的宽度</param>
/// <param name="height"> 新图的高度</param>
/// <param name="path">   新图保存的路径</param>
/// <param name="name">   新图的名称</param>
public static bool CutImage(Image image, int sWidth, int sHeight, int left, int top, int width, int height, string path, string name)
{
    #region 对源图根据缩放参数进行缩放，得到新的原图
    //用指定的大小和格式初始化 Bitmap 类的新实例
    var bitmap = new Bitmap(sWidth, sHeight, PixelFormat.Format32bppArgb);
    //从指定的 Image 对象创建新 Graphics 对象
    var graphics = Graphics.FromImage(bitmap);
    //清除整个绘图面并以透明背景色填充
    graphics.Clear(Color.Transparent);
    //在指定位置并且按指定大小绘制 原图片 对象
    graphics.DrawImage(image, new Rectangle(0, 0, sWidth, sHeight));
    graphics.Dispose();
    #endregion

    #region 对缩放后的原图，根据切图参数剪切
    // 目标区域
    var destRect = new Rectangle(0, 0, width, height);
    // 源图区域
    var srcRect = new Rectangle(left, top, width, height);
    // 新建Graphics对象
    var newImage = new Bitmap(width, height);
    var g = Graphics.FromImage(newImage);
    // 绘图平滑程序
    g.SmoothingMode = SmoothingMode.HighQuality;
    // 图片输出质量
    g.CompositingQuality = CompositingQuality.HighQuality;
    // 输出到newImage对象
    g.DrawImage(bitmap, destRect, srcRect, GraphicsUnit.Pixel);
    // 释放绘图对象
    g.Dispose();
    #endregion
    // 保存图像
    if (File.Exists(path + name))
    {
        File.Delete(path + name);
    }
    newImage.Save(path + name);
    return true;
}

版权声明：本文为博主原创文章，未经博主允许不得转载。