Faust HTML5 picture Cutter 2016 Open source version

Preface

Recently just clean up the floating faustus avatar cropped flash version, for some low-level browser compatibility, since the Flash version has been made, 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 the ipad, Apple, Android and other models. History Document

It's a very common need to cut this picture. But do fine and compatible processing is also quite time-consuming, I just blog related documents have 7, 8, solve the large and small bugs countless, this plug-in not only solves the following bugs, but also the following plug-ins integrated.

Use HTML5 to crop pictures on touch screen devices

Using EXIF JS and script to correct the orientation display of pictures

A picture clipping feature that utilizes HTML5 (has resolved bugs such as iOS flattening scaling)

Megapix-image.js use a pit-ios picture cropped canvas to draw large pictures

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 operation result

In other words, the cutting interface is not ugly, but the demo interface is simply without any style of the page, the demo page will be next.

Demo Run code

Front page code

<%--Created by the IntelliJ idea. User:administrator DATE:2016/5/19 time:16:43 To change this template use File | Settings |
File Templates. --%> <%@ page contenttype= "Text/html;charset=utf-8" language= "java"%>  
 Background receive code – primarily to receive Base64 strings 
 

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%> <%@ page import=" java.util.*,java.io.* "%> <%@ page import=" Java.text.SimpleDateFormat "%> <%@ page import=" org.apache.commons.fileupload.* "%> <%@ page import=" org.apache.commons.fileupload.disk.* "%> <%@ page import=" org.apache.commons.fileupload.servlet.* "%> <% @ Page import= "com.alibaba.fastjson.JSONObject"%> <%@ page import= "Sun.misc.BASE64Decoder"%> <%-/** *
   Kindeditor JSP * * This JSP program is a demo program that is not recommended to be used directly in the actual project.
   * If you are sure to use this program directly, please carefully confirm the relevant security settings before use.

* * *//File Save directory path String Savepath = Application.getrealpath ("/") + "uploads/";

File save Directory URL String saveurl = Request.getcontextpath () + "/uploads/";
  Check directory file Uploaddir = new file (Savepath);
  if (!uploaddir.isdirectory ()) {uploaddir.mkdirs (); The IF (!uploaddir.isdirectory ()) {out.println (GetError) ("Upload directory does not exist.")
    "));
  Return //Check Directory Write permission if (!uploaddir.canwrite ()) {out. println (GetError ("Upload directory does not have write permission.)
    "));
  Return
  String dirname = Request.getparameter ("dir");
  if (dirname = = null) {dirname = "image";
  //Create folder Savepath + = DirName + "/";
  Saveurl + = dirname + "/";
  File Savedirfile = new file (Savepath);
  if (!savedirfile.exists ()) {savedirfile.mkdirs ();
  } simpledateformat sdf = new SimpleDateFormat ("YyyyMMdd");
  String ymd = Sdf.format (New Date ());
  Savepath + = Ymd + "/";
  Saveurl + = Ymd + "/";
  File Dirfile = new file (Savepath);
  if (!dirfile.exists ()) {dirfile.mkdirs ();
  } SimpleDateFormat df = new SimpleDateFormat ("Yyyymmddhhmmss");

  String NewFileName = Df.format (New Date ()) + "_" + New Random (). Nextint (1000) + "." + ". jpg";

  String file=request.getparameter ("file"); if (file==null| |
    File.isempty ()) {Out.println ("Base64 string with key is not found") (GetError);
  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 = new Base64decoder ();

    try {file UploadedFile = new file (Savepath, newfilename);
    FileOutputStream write = new FileOutputStream (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"));
  }%> <%!
    private string GetError (String message) {Jsonobject obj = new Jsonobject ();
    Obj.put ("Error", 1);
    Obj.put ("message", message);
  return obj.tojsonstring ();
    private string getsuccess (string url) {Jsonobject obj = new Jsonobject ();
    Obj.put ("error", 0);
    Obj.put ("url", url);
  return obj.tojsonstring (); }%>
 
Related Resources Download 
Faust HTML5 picture Cutter package Download
The PostScript of Faust HTML5 picture cutter

If you need to make some big changes or we do not understand some of the principles, you can write inquiries, I do not regularly on line.