前言
最近刚刚好整理浮士德头像裁剪的flash版本，为了某些低级浏览器的兼容着想，既然已经做好了flash版本了，那么，现代浏览器的html5版本和ipad版，移动版也要做一些处理和打包。
兼容性
兼容ie10及以上，google浏览器，Firefox浏览器，safari浏览器，兼容ipad，苹果，安卓等机型。
历史文档
话说图片裁剪这个是很常见的需求，但是做到精细化和兼容处理也是相当费工夫的，本人光是博客相关文件都有7、8篇了，解决的大大小小bug不计其数，本插件不但解决了下面的各种bug，而且还将下面的各种插件集成了。
利用exif js及脚本修正图片的orientation显示
一个利用html5的图片裁剪功能（已解决ios压扁缩放等bug）
megapix-image.js使用的一个坑-ios图片裁剪之画布绘制大图片
html5图片裁剪控件原型【含缩放，旋转，拖动功能】—1、控件设计
html5图片裁剪控件原型【含缩放，旋转，拖动功能】—2、核心代码
html5图片裁剪控件原型【含缩放，旋转，拖动功能】—3、实际演示效果
实际运行结果
话说裁剪界面是不丑的，但是演示界面就是简单的没有任何样式的页面，demo页面将就下。
demo运行代码
前端页面代码
<%--
Created by 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" %>
<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>请选择图片</h2>
<input type="file" id="uploadImage" >
<div id="image-editor" style="display: none;">
</div>
<h2>本地裁剪图片</h2>
<img id="usercenter_avatar"/>
<h2>服务端图片</h2>
<img id="preview-image" >
<script type="text/javascript">
$(function(){
//--获取窗口高度及宽度，尽量别超出窗口。
var _e_width = $(window).width() - 200;
var _e_height = $(window).height() - 200;
if (_e_width > 800) {
_e_width = 800;
}
else if (_e_width <300) {
_e_width = 300;
}
_e_height=400;
_e_width=400;
//--这是控件的课配置参数。
var opts = {
cutWidth: 200 //裁剪框的宽度。
, cutHeight: 200 //裁剪框的高度
, containerWidth: _e_width //容器宽度
, containerHeight: _e_height //容器高度
, imageShowWidth: 300 //图片默认显示的宽度【会按照要求的宽度及高度等比缩放】
, imageShowHeight: 300 //图片默认显示的高度【会按照要求的宽度及高度等比缩放】
,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=new NotificationFx({
type:"success"
,message:"成功修改头像"
});
_notice.show();
}
else{
var _notice=new NotificationFx({
type:"error"
,message:sdata.message
});
_notice.show();
}
}
});
}//当用户点击保存按钮要保存图片数据时候的回调函数。
,onBtnResetClick:function(){
if(_imageHandler){
_imageHandler.hideEditor();
}
$("#panel-form").show();
}//reset按钮点击以后。
};
var _imageHandler=ImageEditorHandler(opts);
//--逻辑方法定义
$("#uploadImage").change(function(){
if (document.getElementById("uploadImage").files.length === 0) {
alert("请选择图片！");
return; }
var oFile = 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:"照片上传：文件不能超过5MB!请使用容量更小的照片。",en:"证书上传：文件不能超过100K!"})
changePanel("result");
return;
}*/
if(!new RegExp("(jpg|jpeg|gif|png)+","gi").test(oFile.type)){
alert("照片上传：文件类型必须是JPG、JPEG、PNG或GIF!");
return;
}
var reader = new FileReader();
reader.onload =function(e){
var _img_str=e.target.result;
// img 元素
$("#panel-form").hide();
_imageHandler.init(_img_str,oFile);
};
reader.readAsDataURL(oFile);
return;
});
}
);
</script>
</body>
</html>
后台接收代码–主要是接收base64字符串
<%@ 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
*
* 本JSP程序是演示程序，建议不要直接在实际项目中使用。
* 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
*
*/
//文件保存目录路径
String savePath = application.getRealPath("/") + "uploads/";
//文件保存目录URL
String saveUrl = request.getContextPath() + "/uploads/";
//检查目录
File uploadDir = new File(savePath);
if(!uploadDir.isDirectory()){
uploadDir.mkdirs();
}
if(!uploadDir.isDirectory()){
out.println(getError("上传目录不存在。"));
return;
}
//检查目录写权限
if(!uploadDir.canWrite()){
out.println(getError("上传目录没有写权限。"));
return;
}
String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
//创建文件夹
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(getError("找不到key为file的base64字符串"));
return;
}
String realBase64="";
//--将data:image/jpeg;base64,这种形式过滤掉。
if(file.indexOf(‘,‘)!=-1){
realBase64=file.substring(file.indexOf(‘,‘)+1);
}
else{
realBase64=file;
}
//base64解码。。
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("上传失败"));
}
%>
<%!
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();
}
%>相关资源下载
浮士德html5图片裁剪器打包下载
后记
假如需要进行一些比较大的变动或者大家对一些原理不理解，可以来信询问，我不定时上线。
时间： 2024-08-02 00:14:40