cropper裁剪图片并上传

深碍√TFBOYSˉ_ 2022-05-17 09:48 390阅读 0赞

引入cropper所依赖的js和css，可在官网下载。

我的资源地址：https://download.csdn.net/download/rexueqingchun/10593965

把裁剪的图片转化为base64上传

前台程序

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>上传图片</title>
  7. <link rel="stylesheet" href="css/bootstrap.min.css">
  8. <link rel="stylesheet" href="css/cropper.css">
  9. <link rel="stylesheet" href="css/main.css">
  10. <script src="js/jquery-1.11.3.js"></script>
  11. <script src="js/bootstrap.bundle.min.js"></script>
  12. <script src="js/cropper.js"></script>
  13. <script type="text/javascript">
  14. $(function () {
  15.       var console = window.console || { log: function () {} };
  16.       var URL = window.URL || window.webkitURL;
  17.       var $image = $('#image');
  18.       var $download = $('#download');
  19.       var $dataX = $('#dataX');
  20.       var $dataY = $('#dataY');
  21.       var $dataHeight = $('#dataHeight');
  22.       var $dataWidth = $('#dataWidth');
  23.       var $dataRotate = $('#dataRotate');
  24.       var $dataScaleX = $('#dataScaleX');
  25.       var $dataScaleY = $('#dataScaleY');
  26.       var options = {
  27.             aspectRatio: 1 / 1, //裁剪框的宽高比
  28.             viewMode: 1, //视图模式,默认为0:无限制,1:截取框不能移到图片外部,2:不全部铺满背景,3:全部铺满背景
  29.             dragMode: 'move',//拖拽模式,默认为crop:产生一个新的裁剪框,可改变大小,move:可移动图片,none:不可移动图片
  30.             preview: '.img-preview', //添加额外的元素(容器)以供预览
  31.             autoCropArea: 0.5, //定义初始化裁剪框对比图片的比例大小,默认为0.8
  32.             cropBoxResizable: true, //是否可以调整剪裁框的大小
  33.             cropBoxMovable: true, //是否可以移动剪裁框
  34.             crop: function (e) {
  35.               $dataX.val(Math.round(e.x));
  36.               $dataY.val(Math.round(e.y));
  37.               $dataHeight.val(Math.round(e.height));
  38.               $dataWidth.val(Math.round(e.width));
  39.               $dataRotate.val(e.rotate);
  40.               $dataScaleX.val(e.scaleX);
  41.               $dataScaleY.val(e.scaleY);
  42.             }
  43.           };
  44.       var originalImageURL = $image.attr('src');
  45.       var uploadedImageName = '';
  46.       var uploadedImageType = 'image/jpeg';
  47.       var uploadedImageURL;
  49.       // Cropper
  50.       $image.on({
  51.         ready: function (e) {
  52.           //console.log(e.type);
  53.         },
  54.         cropstart: function (e) {
  55.           //console.log(e.type, e.action);
  56.         },
  57.         cropmove: function (e) {
  58.           //console.log(e.type, e.action);
  59.         },
  60.         cropend: function (e) {
  61.           //console.log(e.type, e.action);
  62.         },
  63.         crop: function (e) {
  64.           //console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
  65.         },
  66.         zoom: function (e) {
  67.           //console.log(e.type, e.ratio);
  68.         }
  69.       }).cropper(options);
  71.       // Buttons
  72.       if (!$.isFunction(document.createElement('canvas').getContext)) {
  73.         $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
  74.       }
  75.       if (typeof document.createElement('cropper').style.transition === 'undefined') {
  76.         $('button[data-method="rotate"]').prop('disabled', true);
  77.         $('button[data-method="scale"]').prop('disabled', true);
  78.       }
  80.       // Download
  81.       if (typeof $download[0].download === 'undefined') {
  82.         $download.addClass('disabled');
  83.       }
  85.       // Methods
  86.       $('.docs-buttons').on('click', '[data-method]', function () {
  87.         var $this = $(this);
  88.         var data = $this.data();
  89.         var cropper = $image.data('cropper');
  90.         var cropped;
  91.         var $target;
  92.         var result;
  94.         if ($this.prop('disabled') || $this.hasClass('disabled')) {
  95.           return;
  96.         }
  98.         if (cropper && data.method) {
  99.           data = $.extend({}, data); // Clone a new one
  101.           if (typeof data.target !== 'undefined') {
  102.             $target = $(data.target);
  104.             if (typeof data.option === 'undefined') {
  105.               try {
  106.                 data.option = JSON.parse($target.val());
  107.               } catch (e) {
  108.                 console.log(e.message);
  109.               }
  110.             }
  111.           }
  113.           cropped = cropper.cropped;
  115.           switch (data.method) {
  116.             case 'rotate': //旋转
  117.               if (cropped && options.viewMode > 0) {
  118.                 $image.cropper('clear');
  119.               }
  121.               break;
  123.             case 'getCroppedCanvas':
  124.               if (uploadedImageType === 'image/jpeg') {
  125.                 if (!data.option) {
  126.                   data.option = {};
  127.                 }
  129.                 data.option.fillColor = '#fff';
  130.               }
  132.               break;
  133.           }
  135.           result = $image.cropper(data.method, data.option, data.secondOption);
  137.           switch (data.method) {
  138.             case 'rotate':
  139.               if (cropped && options.viewMode > 0) {
  140.                 $image.cropper('crop');
  141.               }
  143.               break;
  145.             case 'scaleX':
  146.             case 'scaleY':
  147.               $(this).data('option', -data.option);
  148.               break;
  150.             case 'getCroppedCanvas':
  151.               if (result) {
  152.                 // Bootstrap's Modal
  153.                 $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
  155.                 if (!$download.hasClass('disabled')) {
  156.                   download.download = uploadedImageName;
  157.                   $download.attr('href', result.toDataURL(uploadedImageType));
  158.                 }
  159.               }
  161.               break;
  163.             case 'destroy':
  164.               if (uploadedImageURL) {
  165.                 URL.revokeObjectURL(uploadedImageURL);
  166.                 uploadedImageURL = '';
  167.                 $image.attr('src', originalImageURL);
  168.               }
  170.               break;
  171.           }
  173.           if ($.isPlainObject(result) && $target) {
  174.             try {
  175.               $target.val(JSON.stringify(result));
  176.             } catch (e) {
  177.               console.log(e.message);
  178.             }
  179.           }
  181.         }
  182.       });
  184.       // Import image
  185.       var $inputImage = $('#inputImage');
  187.       if (URL) {
  188.         $inputImage.change(function () {
  189.           var files = this.files;
  190.           var file;
  192.           if (!$image.data('cropper')) {
  193.             return;
  194.           }
  196.           if (files && files.length) {
  197.             file = files[0];
  199.             if (/^image\/\w+$/.test(file.type)) {
  200.               uploadedImageName = file.name;
  201.               uploadedImageType = file.type;
  203.               if (uploadedImageURL) {
  204.                 URL.revokeObjectURL(uploadedImageURL);
  205.               }
  207.               uploadedImageURL = URL.createObjectURL(file);
  208.               $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
  209.               $inputImage.val('');
  210.             } else {
  211.               window.alert('Please choose an image file.');
  212.             }
  213.           }
  214.         });
  215.       } else {
  216.         $inputImage.prop('disabled', true).parent().addClass('disabled');
  217.       }
  219.       //上传图片
  220.       $("#getCroppedCanvas").on("click", function () {
  221.           var cas = $('#image').cropper('getCroppedCanvas');
  222.         if(cas == null){
  223.             alert("请选择图片");
  224.             return false;
  225.         }else{
  226.             var base64url = cas.toDataURL('image/jpeg');
  227.             $.ajax({    
  228.                 url : 'wap_ajbj_upload_zm.htm',  
  229.                 dataType:'json',  
  230.                 type: "post",    
  231.                 data: {
  232.                     fileName : uploadedImageName,
  233.                     imgBase64 : base64url
  234.                 },       
  235.                 success: function (data) { 
  236.                     if(data.result == 'success'){
  237.                         alert("上传成功");
  238.                     }      
  239.                 } 
  240.             });
  241.         } 
  242.       })
  243. });
  244. </script>
  245. </head>
  246. <body>
  247.   <div class="container" style="margin-top: 10px;">
  248.     <div class="row">
  249.       <div class="col-md-9">
  250.         <div class="img-container">
  251.           <img id="image" >
  252.         </div>
  253.       </div>
  254.       <div class="col-md-3">
  255.         <div class="docs-preview clearfix">
  256.           <div class="img-preview preview-lg"></div>
  257.         </div>
  259.         <div class="docs-data">
  260.           <div class="input-group input-group-sm">
  261.             <span class="input-group-prepend">
  262.               <label class="input-group-text" for="dataWidth">宽度</label>
  263.             </span>
  264.             <input type="text" class="form-control" id="dataWidth" disabled>
  265.             <span class="input-group-append">
  266.               <span class="input-group-text">像素</span>
  267.             </span>
  268.           </div>
  269.           <div class="input-group input-group-sm">
  270.             <span class="input-group-prepend">
  271.               <label class="input-group-text" for="dataHeight">高度</label>
  272.             </span>
  273.             <input type="text" class="form-control" id="dataHeight" disabled>
  274.             <span class="input-group-append">
  275.               <span class="input-group-text">像素</span>
  276.             </span>
  277.           </div>
  278.         </div>
  279.       </div>
  280.     </div>
  282.     <div class="row">
  283.       <div class="col-md-9 docs-buttons">
  284.         <div class="btn-group">
  285.           <button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate Left">
  286.             <span class="docs-tooltip" data-animation="false" title="向左旋转">
  287.               <span class="fa fa-rotate-left">向左旋转</span>
  288.             </span>
  289.           </button>
  290.           <button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate Right">
  291.             <span class="docs-tooltip" data-animation="false" title="向右旋转">
  292.               <span class="fa fa-rotate-right">向右旋转</span>
  293.             </span>
  294.           </button>
  295.         </div>
  297.         <div class="btn-group">
  298.             <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
  299.             <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
  300.             <span class="docs-tooltip" data-animation="false" title="打开本地图片">
  301.               <span class="fa fa-upload">选择图片</span>
  302.             </span>
  303.           </label>
  304.         </div>
  306.         <div class="btn-group btn-group-crop">
  307.           <button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ "maxWidth": 4096, "maxHeight": 4096 }">
  308.             <span class="docs-tooltip" data-animation="false" title="获取图片">
  309.                   获取图片
  310.             </span>
  311.           </button>
  312.         </div>
  314.         <!-- 截取固定尺寸 -->
  315.         <div class="btn-group btn-group-crop">
  316.           <button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ "width": 200, "height": 200 }">
  317.             <span class="docs-tooltip" data-animation="false" title="200*200">
  318.               200*200
  319.             </span>
  320.           </button>
  321.         </div>
  323.         <div class="btn-group btn-group-crop">
  324.           <button id="getCroppedCanvas" type="button" class="btn btn-success" >
  325.             <span class="docs-tooltip" data-animation="false" title="上传图片">
  326.                   上传图片
  327.             </span>
  328.           </button>
  329.         </div>
  331.         <!-- 获取图片浮窗 -->
  332.         <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
  333.           <div class="modal-dialog">
  334.             <div class="modal-content">
  335.               <div class="modal-header">
  336.                 <h5 class="modal-title" id="getCroppedCanvasTitle">图片</h5>
  337.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  338.                   <span aria-hidden="true">×</span>
  339.                 </button>
  340.               </div>
  341.               <div class="modal-body"></div>
  342.               <div class="modal-footer">
  343.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
  344.                 <a class="btn btn-primary" id="download" href="javascript:void(0);" >下载</a>
  345.               </div>
  346.             </div>
  347.           </div>
  348.         </div>
  349.       </div>
  350.       </div>
  351.     </div>
  352. </body>
  353. </html>

后台程序

  1. private String filePath = LxwmController.class.getResource("/").getPath().split("WEB-INF")[0]+ "upload/";
  3.     @RequestMapping(value = "wap_ajbj_upload_zm.htm", method = {RequestMethod.GET, RequestMethod.POST })
  4.     @ResponseBody
  5.     public Map<String, Object> wap_ajbj_upload_zm(HttpServletRequest request) throws Exception {
  6.         Map<String, Object> result = new HashMap<String, Object>();
  7.         String fileName = request.getParameter("fileName");
  8.         fileName = System.currentTimeMillis() + "." + fileName.substring(fileName.lastIndexOf(".") + 1);
  9.         String imgBase64 = request.getParameter("imgBase64");
  10.         imgBase64 = imgBase64.split(",")[1];
  11.         GenerateImage(imgBase64,filePath + "/ajbj/zm/"+fileName);
  12.         result.put("result", "success");
  13.         return result;
  14.     }
  16.     /**
  17.      * @Description: 将base64编码字符串转换为图片
  18.      * @param imgStr base64编码字符串
  19.      * @param path 图片路径-具体到文件
  20.     */ 
  21.     public static boolean GenerateImage(String imgStr,String imgFilePath){     
  22.         if (imgStr == null) //图像数据为空  
  23.             return false;  
  24.         BASE64Decoder decoder = new BASE64Decoder();  
  25.         try{  
  26.             //Base64解码  
  27.             byte[] b = decoder.decodeBuffer(imgStr);  
  28.             for(int i=0;i<b.length;++i){  
  29.                 if(b[i] < 0){//调整异常数据  
  30.                     b[i] += 256;  
  31.                 }  
  32.             }  
  33.             OutputStream out = new FileOutputStream(imgFilePath);      
  34.             out.write(b);  
  35.             out.flush();  
  36.             out.close();  
  37.             return true;  
  38.         }   
  39.         catch (Exception e){  
  40.             return false;  
  41.         }  
  42.     }

把裁剪的图片转化为blob上传

前台程序

  1. //上传图片js变更为
  2.       $("#getCroppedCanvas").on("click", function () {
  3.           var cas = $('#image').cropper('getCroppedCanvas');
  4.         if(cas == null){
  5.             alert("请选择图片");
  6.             return false;
  7.         }else{
  8.             var blob = processData(cas.toDataURL());
  9.             var formData = new FormData();
  10.             formData.append('croppedImage', blob);
  11.             formData.append('fileName', uploadedImageName);
  12.             $.ajax({    
  13.                 url : 'wap_ajbj_upload_zm.htm',    
  14.                 type: "post",    
  15.                 data: formData,
  16.                 processData: false,
  17.                 contentType: false,
  18.                 success: function (data) { 
  19.                     if(data.result == 'success'){
  20.                         alert("上传成功");
  21.                     }      
  22.                 } 
  23.             }); 
  24.         } 
  25.      })
  27. //添加转化为二进制方法
  28. function processData(dataUrl) {
  29.     var binaryString = window.atob(dataUrl.split(',')[1]);
  30.     var arrayBuffer = new ArrayBuffer(binaryString.length);
  31.     var intArray = new Uint8Array(arrayBuffer);
  32.     for (var i = 0, j = binaryString.length; i < j; i++) {
  33.         intArray[i] = binaryString.charCodeAt(i);
  34.     }
  35.     var data = [intArray],
  36.         blob;
  37.     try {
  38.         blob = new Blob(data);
  39.     } catch (e) {
  40.         window.BlobBuilder = window.BlobBuilder ||
  41.             window.WebKitBlobBuilder ||
  42.             window.MozBlobBuilder ||
  43.             window.MSBlobBuilder;
  44.         if (e.name === 'TypeError' && window.BlobBuilder) {
  45.             var builder = new BlobBuilder();
  46.             builder.append(arrayBuffer);
  47.             blob = builder.getBlob(imgType); // imgType为上传文件类型，即 file.type
  48.         } else {
  49.             console.log('版本过低，不支持上传图片');
  50.         }
  51.     }
  52.     return blob;
  53. }

后台程序

  1. private String filePath = LxwmController.class.getResource("/").getPath().split("WEB-INF")[0]+ "upload/";
  3.     @RequestMapping(value = "wap_ajbj_upload_zm.htm", method = {RequestMethod.GET, RequestMethod.POST })
  4.     @ResponseBody
  5.     public Map<String, Object> wap_ajbj_upload_zm(@RequestParam(value = "croppedImage",required = false)MultipartFile file, HttpServletRequest request) throws Exception {
  6.         Map<String, Object> result = new HashMap<String, Object>();
  7.         if(file != null && !file.isEmpty()){
  8.             String filename = request.getParameter("fileName");  //获取文件的名字
  9.             filename = new String(filename.getBytes("UTF-8"), "UTF-8");
  10.             String suffix = filename.substring(filename.lastIndexOf(".") + 1);
  11.             filename = System.currentTimeMillis() + "." + suffix;
  12.             try {
  13.                 copyFileRename(file.getInputStream(), filename,filePath + "/ajbj/zm/");
  14.             } catch (IOException e) {
  15.                 e.printStackTrace();
  16.             }    
  17.         }
  18.         result.put("result", "success");
  19.         return result;
  20.     }
  22.     public static void copyFileRename(InputStream in, String fileName,String myFilePath) throws IOException {
  23.         FileOutputStream fs = new FileOutputStream(myFilePath + fileName);
  24.         byte[] buffer = new byte[1024 * 1024];
  25.         int byteread = 0;
  26.         while ((byteread = in.read(buffer)) != -1) {
  27.             fs.write(buffer, 0, byteread);
  28.             fs.flush();
  29.         }
  30.         fs.close();
  31.         in.close();
  32.     }

发表评论

表情：
评论列表 （有 0 条评论，390人围观）

还没有评论，来说两句吧...

相关阅读