本篇介绍的方法代码，都是摘出来的要点，其他的东西大家需要的话，自己补全吧。
注意下面页面代码里，每一个注释几乎都是讲的一个实用而又强大有趣的技巧哦！！看到这些，有没有人会激动下下，给点赞美呢^_^
/* * 用到的几个样式 */<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('')";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: ":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;}
版权声明：本文为博主原创文章，未经博主允许不得转载。
头脑心灵再加上双脚的才是推销员。
