基於layui+cropper.js實現圖片上傳剪裁功能

先看實現效果圖：

點擊頭像上傳觸發上傳操做：

選擇圖片以後：旋轉；復位：

設置要截取的圖片：

點擊確認截取：

接下來講實現過程：

首先圖片截取用的是cropper.js，這裏用的是修改過的配合layui使用的，給出源碼地址：

連接地址：https://pan.baidu.com/s/1TOa2CAWCcYkAhGepqnjcfQ，提取碼：q6wb

接下來是代碼：

首先html代碼顯示要修改的頭像：

而後寫點擊事件，寫layui圖片上傳的方法：

把用到的cropper引入進來，而後後端接口裏面處理要接收的圖片(此處給出我的寫的處理代碼，僅供參考):

 1 /*頭像上傳*/
 2     @ApiOperation(value = "用戶頭像上傳", notes = "用戶修改信息時的頭像上傳接口")
 3     @PostMapping(value = "/upload")
 4     public void working(HttpServletRequest request, HttpServletResponse response)
 5             throws IllegalStateException, IOException {
 6         JSONObject jsonObject = new JSONObject();
 7         jsonObject.put("code", 1);
 8         CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
 9                 request.getSession().getServletContext());
10         if (multipartResolver.isMultipart(request)) {
11             MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
12             Iterator<?> iter = multiRequest.getFileNames();
13             while (iter.hasNext()) {
14                 MultipartFile file = multiRequest.getFile(iter.next().toString());
15                 if (file != null) {
16                     String fileName = file.getOriginalFilename();
17                     String uuid = UUID.randomUUID().toString().replaceAll("-", "");
18                     String fileType = "jpg";
19                     if (fileName.indexOf(".") > -1) {
20                         fileType = fileName.substring(fileName.lastIndexOf("."));
21                     }
22                     String path = "D://kabuqinuo/Head Portraits/" + uuid + fileType;
23                     File newFile = new File(path);
24                     if (!newFile.getParentFile().exists()) {
25                         // 若是目標文件所在的目錄不存在，則建立父目錄
26                         newFile.getParentFile().mkdirs();
27                     }
28                     file.transferTo(new File(path));
29                     if (ImageUtils.judegSize(newFile)){//判斷文件是否過大
30                         String uuids = uuid.substring(0, uuid.length()-1);
31                         String path1 = "D://kabuqinuo/Head Portraits/" + uuids + fileType;
32                         Thumbnails.of(path).scale(1f).outputQuality(0.25f).toFile(path1);
33                         ImageUtils.deleteFile(path);//刪除原文件
34                         jsonObject.put("code", 0);
35                         jsonObject.put("msg", uuids + fileType);
36                     } else {
37                         jsonObject.put("code", 0);
38                         jsonObject.put("msg", uuid + fileType);
39                     }
40                 }
41             }
42         }
43         response.setHeader("Content-Type", "text/html");
44         response.getWriter().write(jsonObject.toString());
45     }

View Code

而後就是響應的過程：前端接收到返回的圖片相對路徑後，一方面替換掉以前的圖片路徑，一方面把新的圖片路徑放入隱藏輸入框中待提交更新數據庫：

代碼寫完。