Home > Developer > Web Develop
Recently just to tidy up the flash version of the floating Faustus avatar, for some low-level browser compatibility, since the Flash version has been done, then, the modern browser HTML5 version and the ipad version, mobile version also to do some processing and packaging.
CompatibilityCompatible with Ie10 and above, Google Browser, Firefox browser, Safari browser, compatible with ipad, Apple, Android and other models.
Historical documentsSay the picture clipping this is very common demand, but to do fine and compatible processing is also a considerable amount of time, I just blog related documents have 7, 8, solve the large and small bug countless, this plugin not only solves the following various bugs, but also the following various plug-ins integrated.
Crop a picture with HTML5 on a touchscreen device
Using EXIF JS and script to fix orientation display of images
A picture clipping feature with HTML5 (fixed iOS flattening scaling, etc.)
Megapix-image.js used a pit-ios picture cropped canvas drawing big picture
Share a front-end ratio compression Picture plugin
HTML5 picture Crop control prototype "with zoom, rotate, drag function"-1, control design
HTML5 picture Crop control prototype "with zoom, rotate, drag function"-2, Core code
HTML5 picture Crop control prototype "with zoom, rotate, drag function"-3, actual demo effect
Actual running resultsSaying that the clipping interface is not ugly, but the presentation interface is simple without any style of the page, the demo page will be next.
Demo Run codeFront page code
<%--Created by IntelliJ idea. User:administrator Date: 5/time:+: to change this template use File | Settings | File templates.--%> <%@ page contenttype="Text/html;charset=utf-8" language="java" %><html><head> <title></title> <jsp:include page="inc.js.jsp"></jsp:include> <!--power image cut--> <link rel="stylesheet" type="text/css" href ="/static/vendor/power-imgcut-v2/style.css"/> <script type="text/javascript" src="/static/vendor/ Power-imgcut-v2/js/exif.min.js "></script> <script type="text/javascript" src="/static/vendor/ Power-imgcut-v2/js/megapix-image.js "></script> <script type="text/javascript" src="/static/vendor/ Power-imgcut-v2/js/imgcut2.min.js "></script> <script type="text/javascript" src="/static/vendor/ Power-imgcut-v2/main.js "></script></head><body><h2>Please select a picture</H2><input type="file" id="Uploadimage" ><divid="Image-editor" style="Display:none;" > </div><h2>Crop a picture locally</H2><img id="Usercenter_avatar"/><h2>Service-side picture</H2><img id="Preview-image" > <script type="Text/javascript">$( function(){ //--Get the window height and width, try not to go beyond the window. var_e_width = $ (window). Width ()- $;var_e_height = $ (window). Height ()- $;if(_e_width > -) {_e_width = -; }Else if(_e_width < -) {_e_width = -; } _e_height= -; _e_width= -;//--This is the class configuration parameter for the control. varopts = {cutwidth: $ the width of the//crop box. , Cutheight: $ //Height of crop box, Containerwidth: _e_width//Container width, Containerheight: _e_height//Container height, Imageshowwidth: - //The width of the image by default will be scaled according to the required width and height ., Imageshowheight: - //The height of the image by default will be scaled according to the required width and height ., imageeditorelement:$ ("#image-editor"), OnSave: function(imgdata){$.ajax ({URL:"/service/savebase64image.jsp", data:{File:imgdata}, Method:"POST", DataType:"JSON", Success: function(sdata){_imagehandler.hideeditor ();if(sdata.error==0){ $("#usercenter_avatar"). attr ("src", Imgdata); $("#preview-image"). attr ("src", Sdata.url);var_notice=NewNotificationfx ({type:"Success", Message:"successfully modified Avatar"}); _notice.show (); }Else{var_notice=NewNotificationfx ({type:"Error", message:sdata.message}); _notice.show (); } } }); }the callback function when the user clicks the Save button to save the picture data. , Onbtnresetclick: function(){ if(_imagehandler) {_imagehandler.hideeditor (); } $("#panel-form"). Show (); }//reset button click later. };var_imagehandler=imageeditorhandler (opts);//--Logical method definition$("#uploadImage"). Change ( function(){ if(document.getElementById ("Uploadimage"). Files.length = = =0) {alert ("Please select the picture!" ");return; }varOfile = document.getElementById ("Uploadimage"). files[0];//if (!rfilter.test (Ofile.type)) {alert ("You must select a valid Image file!"); return;} / * if (ofile.size>5*1024*1024) {message (MYCACHE.PAR.LANG,{CN: "Photo upload: file cannot exceed 5mb! please use smaller size photos. ", en:" Certificate upload: File cannot exceed 100k! "}) Changepanel ("result"); Return }*/ if(!New RegExp("(jpg|jpeg|gif|png) +","GI"). Test (Ofile.type)) {alert ("Photo upload: File type must be JPG, JPEG, PNG, or gif!");return; }varReader =NewFileReader (); Reader.onload = function(e){ var_img_str=e.target.result;//IMG element$("#panel-form"). Hide (); _imagehandler.init (_img_str,ofile); }; Reader.readasdataurl (ofile);return; }); } );</script></body></html>Background receive code – mostly receive Base64 strings
<%@ page language="Java"Contenttype="text/html; Charset=utf-8 "pageencoding="UTF-8"%><%@ pageImport="Java.util.*,java.io.*"%><%@ pageImport="Java.text.SimpleDateFormat"%><%@ pageImport="org.apache.commons.fileupload.*"%><%@ pageImport="org.apache.commons.fileupload.disk.*"%><%@ pageImport="org.apache.commons.fileupload.servlet.*"%><%@ pageImport="Com.alibaba.fastjson.JSONObject"%><%@ pageImport="Sun.misc.BASE64Decoder"%><%/** * Kindeditor JSP * * This JSP program is a demo program, it is recommended not to be used directly in the actual project. * If you are sure to use this program directly, please carefully confirm the relevant safety settings before use. * *///File save directory pathString Savepath = Application.getrealpath ("/") +"uploads/";//File save directory URLString Saveurl = Request.getcontextpath () +"/uploads/";//Check directoryFile Uploaddir =NewFile (Savepath);if(!uploaddir.isdirectory ()) {Uploaddir.mkdirs (); }if(!uploaddir.isdirectory ()) {Out.println (GetError ("The upload directory does not exist. "));return; }//Check directory Write permissions if(!uploaddir.canwrite ()) {Out.println (GetError ("The upload directory does not have write permissions. "));return; } String dirName = Request.getparameter ("dir");if(DirName = =NULL) {DirName ="Image"; }//Create a folderSavepath + = DirName +"/"; Saveurl + = DirName +"/"; File Savedirfile =NewFile (Savepath);if(!savedirfile.exists ()) {Savedirfile.mkdirs (); } SimpleDateFormat SDF =NewSimpleDateFormat ("YyyyMMdd"); String Ymd = Sdf.format (NewDate ()); Savepath + = Ymd +"/"; Saveurl + = Ymd +"/"; File Dirfile =NewFile (Savepath);if(!dirfile.exists ()) {Dirfile.mkdirs (); } SimpleDateFormat df =NewSimpleDateFormat ("YYYYMMDDHHMMSS"); String NewFileName = Df.format (NewDate ()) +"_"+NewRandom (). Nextint ( +) +"."+". jpg"; String File=request.getparameter ("File");if(file==NULL|| File.isempty ()) {Out.println (GetError ("The Base64 string for file is not found"));return; } String realbase64="";//--will data:image/jpeg;base64, this form filter out. if(File.indexof (', ')!=-1) {realbase64=file.substring (File.indexof (', ')+1); }Else{realbase64=file; }//base64 decoding: Base64decoder decoder =NewBase64decoder ();Try{File UploadedFile =NewFile (Savepath, NewFileName); FileOutputStream Write =NewFileOutputStream (UploadedFile);byte[] decoderbytes = Decoder.decodebuffer (realBase64); Write.write (decoderbytes); Write.close (); Out.println (Getsuccess (saveurl+"/"+newfilename)); }Catch(IOException e) {E.printstacktrace (); Out.println (GetError ("Upload failed")); }%><%!PrivateStringGetError(String message) {Jsonobject obj =NewJsonobject (); Obj.put ("Error",1); Obj.put ("Message", message);returnObj.tojsonstring (); }PrivateStringgetsuccess(String URL) {Jsonobject obj =NewJsonobject (); Obj.put ("Error",0); Obj.put ("url", URL);returnObj.tojsonstring (); }%>Faust HTML5 picture Cutter package Download
Faust HTML5 Picture Cutter
If you need to make some big changes or people do not understand some principles, you can write to ask, I do not regularly on-line.
Faust HTML5 picture Clipper 2016 Open source version
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
