<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ include file="../common_front.jsp" %> 







 
 
 function getSize(size){
  var num=parseInt(size);
  if(num<=300){//先要求圖片的大小小于300之間
  return num;
  }
  return getSize(num/2);
 }
 function getRoundedCanvas(sourceCanvas) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var width = sourceCanvas.width;
  var height = sourceCanvas.height;
  width=getSize(width);
  height=width;
  canvas.width = width;
  canvas.height = height;
  context.beginPath();
  //這里是控制裁剪區(qū)域的大?。ㄟ@里也決定你所要生成的圖片的大小和形狀 我這邊用的是圓形的頭像 大家有別的需要可以修改）
  context.arc(width/2, height/2, Math.min(width, height)/2, 0, 2 * Math.PI);
  context.strokeStyle = 'rgba(0,0,0,0)';
  context.stroke();
  context.clip();
  context.drawImage(sourceCanvas, 0, 0, width, height);
  return canvas;
 }
 $(function(){
  var $image = $('#image');
  var $button = $('#button');
  var $result = $('#result');
  var croppable = false;
  $image.cropper({
   aspectRatio: 1,
   viewMode: 1,
   ready: function () {
    croppable = true;
   }
  });
  $button.on('click', function () {
   var croppedCanvas;
   var roundedCanvas;
   if (!croppable) {
    return;
   }
   // 裁剪
  croppedCanvas = $image.cropper('getCroppedCanvas');
  //判斷圖片大小,如果超過(guò)1080 則返回
   if(croppedCanvas.width>1080){
   alert("圖片過(guò)大,請(qǐng)重新選擇!");
   return false;
   }
   // 生成圓形
  roundedCanvas = getRoundedCanvas(croppedCanvas);
   //將裁剪區(qū)域的圖片轉(zhuǎn)出圖片的base64編碼，放到表單里提交到后臺(tái)。后臺(tái)再對(duì)其進(jìn)行解碼，保存。
   $("#icon").val(roundedCanvas.toDataURL());
   $.ajax({
   url:'${path }/front/saveUserIcon',
   data:$("#submitForm").serialize(),
   type:'POST',
   success:function(data){
   if(data.code==200){
    parent.location.reload(); // 父頁(yè)面刷新
      var index = parent.layer.getFrameIndex(window.name); //獲取窗口索引
      parent.layer.close(index);
   }else{
   warningAlert(data.msg);
   }
   }
   });
   return false;
 });
 //當(dāng)選擇完圖片后，直接提交表單到后臺(tái)，圖片保存后再回到此頁(yè)面。這樣此頁(yè)面的圖片裁剪畫(huà)布就改變成你所選擇的圖片了
  $("#file").change(function(){
   var fileName=$("#file").val();
   fileName=fileName.toLowerCase(); 
   if((fileName.indexOf(".jpg")!=-1)||(fileName.indexOf(".png")!=-1)||(fileName.indexOf(".jpeg")!=-1)||(fileName.indexOf(".bmp")!=-1)||(fileName.indexOf(".gif")!=-1)){
   $("#imageUploadForm").submit();   
   }else{
   alert("所選圖片格式錯(cuò)誤或者不支持此類圖片格式！");
   }   
   return false;
  });
 });
 


 
 
 
  󰀠 選擇圖片
  
    
 
 
 

 
  
 
 
  
 
 
  
 
 
 
   
  
  
 
 
 

snippet_file_0.txt

下面是我后臺(tái)處理方法，大家可以借鑒一下。后臺(tái)是ssm框架，主要是保存圖片和圖片轉(zhuǎn)碼

//用戶上傳頭像
 /**
 * 
 * @param image 選擇的圖片
 * @param model
 * @param userId 用戶id
 * @param userType 用戶類型
 * @param request
 * @param originalImage 上一張臨時(shí)圖片
 * @return
 */
 @RequestMapping(value="/imageUpload",method=RequestMethod.POST)
 public String iconImageUpload(@RequestParam(value="file",required=false)MultipartFile image,Model model,@CookieValue("userId")String userId,HttpServletRequest request,String originalImage){
 String basePath="image/";
 //web.xml里面配置的用戶圖片存儲(chǔ)路徑
 String userImagePath=request.getSession().getServletContext().getInitParameter("userImageSavePath");
 //圖片相對(duì)路徑 
 String imageRelativePath=FileUtils.fileUpload(image, request,basePath+userImagePath);
 System.out.println("圖片保存路徑------"+imageRelativePath);
 System.out.println("上一張臨時(shí)圖片------"+originalImage);
 //刪除上一張臨時(shí)圖片
 if(originalImage!=null){
 String basePathTemp=request.getSession().getServletContext().getRealPath("/");
 FileUtils.deleteFile(basePathTemp+originalImage);
 }
 model.addAttribute("imageRelativePath", imageRelativePath);
 model.addAttribute("userId", userId);
 return "/crop_image"; 
 }
 //將裁剪好的頭像由base64還原成圖片
 @ResponseBody
 @RequestMapping(value="/saveUserIcon",method=RequestMethod.POST)
 public Msg saveUserIcon(String icon,@CookieValue("userType")String userType,@CookieValue("userId")String userId,String originalImage,HttpServletRequest request){
 System.out.println("icon-----"+icon);
 //先生成圖片地址
 String realpath=request.getSession().getServletContext().getRealPath("/");
 String basePath="image/";
 String userImagePath=request.getSession().getServletContext().getInitParameter("userImageSavePath");
 Calendar now=Calendar.getInstance();
 String relativePath=basePath+userImagePath+"/"+now.get(Calendar.YEAR)+"/"+(now.get(Calendar.MONTH)+1)+"/"+now.get(Calendar.DAY_OF_MONTH)+"/"+FileUtils.getUUID()+".png";
 String imagePath=realpath+relativePath;
 //將base64 轉(zhuǎn)換成圖片
 FileUtils.base64ToImage(icon, imagePath);
 //刪除原圖
 if(originalImage!=null){
 FileUtils.deleteFile(realpath+originalImage); 
 }
 return Msg.success();
 }
 //下面是解碼的方法
 public static boolean base64ToImage(String base64, String path) {// 對(duì)字節(jié)數(shù)組字符串進(jìn)行Base64解碼并生成圖片 
  if (base64 == null){ // 圖像數(shù)據(jù)為空 
   return false; 
  } 
  System.out.println(base64);
  // base64 的格式為 “data:image/png;base64,****”,逗號(hào)之前都是一些說(shuō)明性的文字，我們只需要逗號(hào)之后的就行了
  base64=base64.split(",")[1];
  BASE64Decoder decoder = new BASE64Decoder(); 
  try { 
   // Base64解碼 
   byte[] bytes = decoder.decodeBuffer(base64); 
   for (int i = 0; i < bytes.length; ++i) { 
    if (bytes[i] < 0) {// 調(diào)整異常數(shù)據(jù) 
     bytes[i] += 256; 
    } 
   } 
   // 生成圖片 
   OutputStream out = new FileOutputStream(path); 
   out.write(bytes); 
   out.flush(); 
   out.close(); 
   return true; 
  } catch (Exception e) { 
   return false; 
  } 
 }

關(guān)于使用cropper.js怎么裁剪頭像問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。