Custom avatar processing is lightweight and practical. There are a lot of powerful tips in it. Come and praise me ^ _ ^, Avatar tips

Custom avatar processing is lightweight and practical. There are a lot of powerful tips in it. Come and praise me ^ _ ^, Avatar tips
The Method Code introduced in this article is all the key points. If you need other things, complete them by yourself.

Note that in the Code on the following page, every comment is basically a practical, powerful, and interesting technique !! Will anyone be excited when I see this?

/** Several styles used */<style>/* Key styles for automatically vertical center of fully compatible images Oh ^_^ */. imgmid {display: inline-block; * display: inline; * zoom: 1; height: 100%; width: 1px; margin-left:-1px; vertical-align: middle ;} /* set the maximum width and maximum height of the image to achieve the css of adaptive size. It is more convenient and efficient than the JS implementation */. autoSize {max-width: 360px; max-height: 240px; vertical-align: middle ;}. activeImg {position: absolute;}/* box-like container, only show the style of the circular area Oh ^_^ */. showImg {width: 100 Px; 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">/* Key to refreshing form submission-hidden iframe, the target of the form points to the hidden 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; ">  <span class =" imgmid "> </span>/* The span is key to vertical center of images */</div>  </div> <div class =" showImg ">  </div> <div style =" color: Gray; clear: left; margin-bottom: 20px; "> the image format is jpg, the maximum image size is 2 MB </div>/* the file control that can be customized. It is so simple to define a div and put a fully-transparent file tag in it, how about it? worship me ^_^ */<div style = "border: 1px solid gray; position: relative; widt H: 100px; height: 40px; line-height: 40px; text-align: center; vertical-align: middle; font-size: 18px; "> select the image <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 = "hi Dden "id =" ImgTop "name =" ImgTop "/> <input type =" hidden "id =" ImgLeft "name =" ImgLeft "/> </div> <div class = "mb"> <input type = "submit" class = "lang-btn" id = "btnSubmit" value = "OK"/> <a href = "javascript :; "class =" lang-btn-huge lang-cancel mlw "> cancel </a> </div> </form> <script type =" text/javascript"> // custom cursor // document. body. style. cursor = "url ('HTTP: // bbb.com/images/cur.cur')"; function UploadCallBa Ck (msg) {if (msg. indexOf ("Image Upload error") =-1) {// clear the image style (to prevent the newly loaded image from being affected ), add the required style $ ("# imgPhoto "). removeAttr ("width "). removeAttr ("height "). removeAttr ("style "). removeClass ("activeImg "). addClass ("autoSize "). attr ("src", msg); $ ("# imgShow "). attr ("src", msg);} else {alert ("the system is busy. Please try again later! ") ;}}// The code for scaling and moving images is also super simple. // compared with the encapsulated code controls on the Internet, the JavaScript code is too complicated to move, it is difficult to maintain. // This implementation is a contribution. It also helps beginners to learn and enable intelligence ^_^ $ (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. widt H ()). 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. o RiginalEvent. wheelDelta> 0? 1:-1; var width = obj. width () * (10 + wm)/10; // you can modify 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 (fun Ction (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 control RESPONSE event $ ("# fileUpload "). change (function () {var tmp = this. value. split ('\'); var fileName = tmp [tmp. length-1]. split ('. '); document. forms ["fmPhoto"]. submit () ;}); // Form Verification and ajax submission, var valid =$ ("# fmPhoto "). validate ({submitHandler: functio N () {$ ("# 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: "The system is busy. Please try again later! "}; 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>

This background graph cutting method can be used as a reference.

/// <Summary> /// Based on the parameter cropping method, which contains the image scaling information, make sure that the selected part is displayed. /// </summary> /// <param name = "image"> source image </param> /// <param name = "sWidth"> width after source image scaling </param> // <param name = "sHeight"> height after source image scaling </param> // <param name = "left"> left coordinate of the New Graph relative to the source graph </param> /// <param name = "top"> top coordinate of the New Graph relative to the source graph </param> /// <param name = "width"> width </param> /// <param name = "height"> height </param> /// <param name = "path"> path of the New Graph </param> // <param name = "name"> name of the New Graph </param> public static bool CutImage (Image image, int sWidth, int sHeight, int left, int top, int width, int height, string path, string name) {# region scales the source Image Based on the scaling parameter, get the new source image // initialize the new instance var Bitmap = new bitmap (sWidth, sHeight, PixelFormat. format32bppArgb); // create a new Graphics object var graphics = Graphics from the specified Image object. fromImage (bitmap); // clear the entire drawing surface and fill graphics with a transparent background color. clear (Color. transparent); // draw the original image graphics at the specified position and by the specified size. drawImage (image, new Rectangle (0, 0, sWidth, sHeight); graphics. dispose (); # endregion # The scaled source image of region. Cut the Image Based on the cut parameters. // var destRect = new Rectangle (0, 0, width, height) in the target region ); // var srcRect = new Rectangle (left, top, width, height) in the source image area; // create a Graphics object var newImage = new Bitmap (width, height ); var g = Graphics. fromImage (newImage); // drawing smoothing program g. smoothingMode = SmoothingMode. highQuality; // image output quality g. compositingQuality = CompositingQuality. highQuality; // output to newImage object g. drawImage (bitmap, destRect, srcRect, GraphicsUnit. pixel); // release the Drawing Object g. dispose (); # endregion // Save the image if (File. exists (path + name) {File. delete (path + name);} newImage. save (path + name); return true ;}

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.