本次采用的是cropper裁剪
一、需引入文件
<link rel="stylesheet" href="scripts/cropper/cropper.css" />
<script src="scripts/cropper/jquery.min.js"></script>
<script src="scripts/cropper/cropper.js"></script>
此处需注意的是，必须先引入jquery.min.js，再引入cropper.js,否则会出现错误.cropper()函数未定义，我猜想cropper.js是基于jquery写的
二、元素
<!-- 调用选择图片，并将图片的值传到后台 --> <input type="file" style="display: none;" id="PRODUCT_PIC" name="PRODUCT_PIC" value="" οnchange="selectImage(this)"> <!-- 图片点击与显示 --> <div style="width:500px;height: 800px;display:inline;" id="cropper1"> <img οnclick="selectclick()" src="<%=touxiang%>/${DATE}/${pd.PRODUCT_PIC}" style="height: 800px; width: 500px; cursor: pointer;" id="img"/> </div> <!-- 图片裁剪 --> <div style="width:500px;height: 800px; display: none" id="cropper2"> <img src="" style="height: 800px; width: 500px; cursor: pointer;" id="cropper"/> <button id="image_save" >保存</button> </div>三、js代码
//点击图片，调用input上传图片的功能 function selectclick() { document.getElementById("PRODUCT_PIC").click(); } //上传图片 function selectImage(file) { debugger; if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); //上传图片成功的回调 reader.onload = function(evt) { $('#cropper1').hide(); $('#cropper2').show(); //调用cropper.js中的方法出现裁剪区，evt.target.result是的到的图片的src,传入下面的函数中 $('#cropper').cropper('reset', true).cropper('replace', evt.target.result); } reader.readAsDataURL(file.files[0]);//将信息存入input } //裁剪区格式的设定 $('#cropper').cropper({ viewMode: 1, aspectRatio: 1, //裁剪比例，NaN-自由选择区域 autoCropArea: 0.9, //初始裁剪区域占图片比例 aspectRatio: 500 / 800, resizable:false,//不允许改变裁剪框大小 dragCrop:false,//不允许重开裁剪框 // movable:false,//不允许移动裁剪框 crop: function(data) { //裁剪操作回调 } }); //图片显示 $('#image_save').click(function(e) { debugger; e.preventDefault();//阻止整个页面的表单提交 var canVas = $('#cropper').cropper("getCroppedCanvas", {}); //将裁剪的图片加载到face_image $('#img').attr('src', canVas.toDataURL()); //去除base64的data:image/png;base64, eImgBase64 = canVas.toDataURL().substring(22); $.ajax({ type: "POST", url: '<%=basePath%>/product/cropper.do', data: {touxiang:eImgBase64}, success: function(data){ $("#Form").append("<input type='hidden' name='pic0' value='"+data+"'/>"); } }); $('#cropper2').hide(); $('#cropper1').show(); });需要注意的是：
1、canVas.toDataURL()的到的是base64的字符串（格式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAAEjCAYAAACfLPtAAAAgAElEQVR4Xny9WZBl13Ultu785nw5j5U1zxMKqAKKBAoEQIiTSFGkqOi25T9/2P6yI+SOkNTqcITD/nHbH/7oD0tid....），如果是在前端展示，直接将其赋值给'src',如果传送给controller去处理，必须把data:image/png;base64,上传方式必须用post
2、有可能会出现http post request header is too large问题，部署时需要修改server.xml
3、<%=basePath%>代表项目路径
三、controller层的代码
'<%=basePath%>product/cropper.do'方法的作用是，将接收base64图片，将其存入本地，返回ajax一个图片地址，
/**图片裁剪存储 * @param touxiang * @throws Exception */ @RequestMapping(value="/cropper") @ResponseBody public String cropper() throws Exception{ PageData pd = this.getPageData();// 获取post+get的参数 String touxiang =""; try{ //必传参数的非空判断 if (null != pd.getString("touxiang") && !"".equals(pd.getString("touxiang"))) { //存储头像的名称 touxiang = this.get32UUID()+".png"; //对字节数组字符串进行Base64解码并生成图片 String a = pd.getString("touxiang");//传入的base64 boolean generateImage = ImageAnd64Binary.generateImage(a, Image.getBASICPATH()+Image.getPATHPIC() + "/" + touxiang); System.out.println(Image.getImageTou1()+touxiang); } }catch(Exception e){ logger.info("图片裁剪异常：" + e.getMessage()); } logAfter(logger, "图片裁剪结束"); return Image.getBASICPATH()+Image.getPATHPIC() + "/" + touxiang; }generateImage方法：对字节数组字符串进行Base64解码并生成图片
该方法的第一个参数是base64字符串，第二个是存入的路径
/** * 对字节数组字符串进行Base64解码并生成图片 * @param imgStr 转换为图片的字符串 * @param imgCreatePath 将64编码生成图片的路径 * @return */ public static boolean generateImage(String imgStr, String imgCreatePath){ if (imgStr == null) //图像数据为空 return false; BASE64Decoder decoder = new BASE64Decoder(); try { //Base64解码 byte[] b = decoder.decodeBuffer(imgStr); for(int i=0;i<b.length;++i) { if(b[i]<0) {//调整异常数据 b[i]+=256; } } OutputStream out = new FileOutputStream(imgCreatePath); out.write(b); out.flush(); out.close(); return true; } catch (Exception e){ return false; } }