Faust HTML5 picture Clipper 2016 Open source version

Source: Internet
Author: User
Tags base64

Objective

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.

Compatibility

Compatible with Ie10 and above, Google Browser, Firefox browser, Safari browser, compatible with ipad, Apple, Android and other models.

Historical documents

Say 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 results

Saying 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 code

Front 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 (); }%>
Related Resources Download

Faust HTML5 picture Cutter package Download
Faust HTML5 Picture Cutter

Postscript

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.