碼上快樂

相關內容    簡體    繁體

cropper.js 實現HTML5 裁剪圖片並上傳(裁剪上傳頭像。)

本文轉載自   查看原文   2018-03-23 10:37   2757    文件上傳/ 圖片上傳裁剪瀏覽

 https://blog.csdn.net/qq727013465/article/details/51823231

我的需求功能：在手機端實現上傳頭像，帶裁剪框。

cropper.js  通過canvas實現圖片裁剪，最后在通過canvas獲取裁剪區域的圖片base64串。

cropper 文檔：官方文檔是全英文的，好吧我看不懂。只能一個個試試效果，就有了下面的總結。官方文檔<-點這

1.container 容器   2.canvas 圖片   3.crop  裁剪框

option相關參數說明：

 

viewMode 顯示模式

  • Type: Number
  • Default: 0
  • Options:
    • 0: the crop box is just within the container    裁剪框只能在 1內移動
    • 1: the crop box should be within the canvas   裁剪框 只能在  2圖片內移動
    • 2: the canvas should not be within the container  2圖片 不全部鋪滿1 （即縮小時可以有一邊出現空隙）
    • 3: the container should be within the canvas  2圖片 全部鋪滿1 （即 再怎么縮小也不會出現空隙）

dragMode  拖動模式

  • Default: 'crop'
  • Options:
    • 'crop': create a new crop box  當鼠標 點擊一處時根據這個點重新生成一個 裁剪框
    • 'move': move the canvas    可以拖動圖片
    • 'none': do nothing  圖片就不能拖動了

Define the dragging mode of the cropper.

toggleDragModeOnDblclick   默認true .是否允許 拖動模式 “crop” 跟“move” 的切換狀態。。即當點下為crop 模式，如果未松開拖動這時就是“move”模式。放開后又為“crop”模式

preview  截圖的顯示位置   型：String(jQuery選擇器)，默認值''
responsive ：類型：Boolean，默認值true。是否在窗口尺寸改變的時候重置cropper。

 

checkImageOrigin：類型：Boolean，默認值true。默認情況下，插件會檢測圖片的源，如果是跨域圖片，圖片元素會被添加crossOrigin class，並會為圖片的url添加一個時間戳來使getCroppedCanvas變為可用。添加時間戳會使圖片重新加載，以使跨域圖片能夠使用getCroppedCanvas。在圖片上添加crossOrigin class會阻止在圖片url上添加時間戳，及圖片的重新加載。

background：類型： Boolean，默認值 true。是否在容器上顯示網格背景。 要想改背景，我是直接改，cropper.css樣式中的 cropper-bg

canvas（圖片）相關
movable：類型： Boolean，默認值 true。是否允許移動圖片
rotatable：類型： Boolean，默認值 true。是否允許旋轉圖片。
scalable  默認 true 。 是否允許擴展圖片。（暫時不知道干嘛用）
zoomable 默認true, 石頭允許縮放圖片。
zoomOnWheel 默認 true 是否允許鼠標滾軸 縮放圖片
zoomOnTouch 默認true 是否允許觸摸縮放圖片（觸摸屏上兩手指操作。）
wheelZoomRatio 默認0.1 師表滾軸縮放圖片比例。即滾一下。圖片縮放多少。如 0.1 就是圖片的10%
 
crop(裁剪框)相關

aspectRatio 裁剪框比例  默認NaN   例如：: 1 / 1,//裁剪框比例 1：1

modal：類型：Boolean，默認值true。是否在剪裁框上顯示黑色的模態窗口。
cropBoxMovable :默認true ,是否允許拖動裁剪框cropBoxResizable :默認 true,//是否允許拖動 改變裁剪框大小
autoCrop：類型： Boolean，默認值 true。是否允許在初始化時自動出現裁剪框。autoCropArea：類型： Number，默認值 0.8（圖片的80%）。0-1之間的數值，定義自動剪裁框的大小。highlight：類型： Boolean，默認值 true。是否在剪裁框上顯示白色的模態窗口。
guides：類型： Boolean，默認值 true。是否在剪裁框上顯示虛線。
center:  默認true  是否顯示裁剪框 中間的+ 

restore :  類型：Boolean，默認值true  是否調整窗口大小后恢復裁剪區域。

大小相關
minContainerWidth：類型： Number，默認值 200。容器的最小寬度。minContainerHeight：類型： Number，默認值 100。容器的最小高度。minCanvasWidth：類型： Number，默認值 0。canvas 的最小寬度（image wrapper）。minCanvasHeight：類型： Number，默認值 0。canvas 的最小高度（image wrapper）。監聽觸發的方法build：類型： Function，默認值 null。 build.cropper事件的簡寫方式。 ====== 。控件初始化前執行built：類型： Function，默認值 null。 built.cropper事件的簡寫方式。  ====== 空間初始化完成后執行dragstart：類型： Function，默認值 null。 dragstart.cropper事件的簡寫方式。 ======  拖動開始執行dragmove：類型： Function，默認值 null。 dragmove.cropper事件的簡寫方式。======  拖動移動中執行dragend：類型： Function，默認值 null。 dragend.cropper事件的簡寫方式。======  拖動結束執行zoomin：類型： Function，默認值 null。 zoomin.cropper事件的簡寫方式。 ======  縮小執行zoomout：類型： Function，默認值 null。 zoomout.cropper事件的簡寫方式。 ======  放大執行

 

demo 下載 

 

html  

 

[html]  view plain  copy
 
  1. <section style="margin-top: 50px;">  
  2.         <input id="photoBtn" type="button" onclick="document.getElementById('inputImage').click()" value="選擇照片"><!-- 可以增加自己的樣式 -->  
  3.         <input  id="inputImage"  type="file" accept="image/*" style="display: none;"/>  
  4.         <br/>  
  5.         <img  id="showImg" />  
  6.     </section>  
  7.   
  8.     <div class="container" style="padding: 0;margin: 0;position:fixed;display: none;top: 0;left: 0;z-index: 200;" id="containerDiv">  
  9.         <div class="row" style="display: none;" id="imgEdit">  
  10.           <div class="col-md-9">  
  11.             <div class="img-container">  
  12.               <img src="" alt="Picture">  
  13.             </div>  
  14.           </div>  
  15.         </div>  
  16.         <div class="row" id="actions" style="padding: 0;margin: 0;width: 100%;position: fixed;bottom: 5px;">  
  17.           <div class="col-md-9 docs-buttons">  
  18.             <div class="btn-group" >  
  19.               <button type="button" class="btn btn-primary" data-method="destroy" title="Destroy" style="height: auto;">  
  20.                 <span class="docs-tooltip" data-toggle="tooltip" >  
  21.                   <span class="fa fa-power-off" >取消</span>  
  22.                 </span>  
  23.               </button>  
  24.             </div>  
  25.       
  26.             <div class="btn-group btn-group-crop " style="float: right;">  
  27.               <button type="button" class="btn btn-primary" id="imgCutConfirm" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }" style="height: auto;margin-right: 17px;">  
  28.                 <span class="docs-tooltip" data-toggle="tooltip" title="">確認</span> <!--cropper.getCroppedCanvas({ width: 320, height: 180 }) -->  
  29.               </button>  
  30.             </div>  
  31.       
  32.           </div><!-- /.docs-buttons -->  
  33.         </div>  
  34.     </div>  
[html]  view plain  copy
 
  1. </pre><pre name="code" class="html">  

 

 

 使用調用cropper 截圖   的js 

 

[html]  view plain  copy
 
  1. var fileImg = "";  
[html]  view plain  copy
 
  1. </pre><pre name="code" class="html">window.onload = function () {  
  2.   
  3.   'use strict';//表示強規則  
  4.     
  5.   var screenWidth = $(window).width();  
  6.   var screenHeight =  $(window).height();  
  7.      
  8.   var Cropper = window.Cropper;  
  9.   var console = window.console || { log: function () {} };  
  10.   var container = document.querySelector('.img-container');  
  11.   var image = container.getElementsByTagName('img').item(0);  
  12.   var actions = document.getElementById('actions');  
  13.   var isUndefined = function (obj) {  
  14.       return typeof obj === 'undefined';  
  15.   };  
  16.   var options = {  
  17.         minContainerHeight :  screenHeight,  
  18.         minContainerWidth : screenWidth,  
  19.         aspectRatio: 1 / 1,//裁剪框比例 1：1  
  20.         viewMode : 1,//顯示  
  21.         guides :false,//裁剪框虛線 默認true有  
  22.         dragMode : "move",  
  23.         build: function (e) { //加載開始  
  24.             //可以放你的過渡 效果  
  25.         },  
  26.         built: function (e) { //加載完成  
  27.             $("#containerDiv").show();  
  28.             $("#imgEdit").show();  
  29.         },  
  30.         zoom: function (e) {  
  31.           console.log(e.type, e.detail.ratio);  
  32.         },  
  33.         background : true,// 容器是否顯示網格背景  
  34.         movable : true,//是否能移動圖片  
  35.         cropBoxMovable :false,//是否允許拖動裁剪框  
  36.         cropBoxResizable :false,//是否允許拖動 改變裁剪框大小  
  37.   };  
  38.   var cropper = new Cropper(image, options);  
[html]  view plain  copy
 
  1.  //禁用默認方法  
  2.   function preventDefault(e) {  
  3.     if (e) {  
  4.       if (e.preventDefault) {  
  5.         e.preventDefault();  
  6.       } else {  
  7.         e.returnValue = false;  
  8.       }  
  9.     }  
  10.   }  
  11.   
  12.   // Tooltip  
  13.   $('[data-toggle="tooltip"]').tooltip();  
  14.   
  15.   
  16.   if (typeof document.createElement('cropper').style.transition === 'undefined') {  
  17.       $('button[data-method="rotate"]').prop('disabled', true);  
  18.       $('button[data-method="scale"]').prop('disabled', true);  
  19.   }  
  20.   
  21.   // Methods  
  22.   actions.querySelector('.docs-buttons').onclick = function (event) {  
  23.     var e = event || window.event;  
  24.     var target = e.target || e.srcElement;  
  25.     var result;  
  26.     var input;  
  27.     var data;  
  28.   
  29.     if (!cropper) {  
  30.       return;  
  31.     }  
  32.   
  33.     while (target !== this) {  
  34.       if (target.getAttribute('data-method')) {  
  35.         break;  
  36.       }  
  37.   
  38.       target = target.parentNode;  
  39.     }  
  40.   
  41.     if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {  
  42.       return;  
  43.     }  
  44.   
  45.     data = {  
  46.       method: target.getAttribute('data-method'),  
  47.       target: target.getAttribute('data-target'),  
  48.       option: target.getAttribute('data-option'),  
  49.       secondOption: target.getAttribute('data-second-option')  
  50.     };  
  51.   
  52.     if (data.method) {  
  53.       if (typeof data.target !== 'undefined') {  
  54.         input = document.querySelector(data.target);  
  55.   
  56.         if (!target.hasAttribute('data-option') && data.target && input) {  
  57.           try {  
  58.             data.option = JSON.parse(input.value);  
  59.           } catch (e) {  
  60.             console.log(e.message);  
  61.           }  
  62.         }  
  63.       }  
  64.   
  65.       if (data.method === 'getCroppedCanvas') {  
  66.         data.option = JSON.parse(data.option);  
  67.       }  
  68.   
  69.       result = cropper[data.method](data.option, data.secondOption);  
  70.   
  71.       switch (data.method) {  
  72.         case 'scaleX':  
  73.         case 'scaleY':  
  74.           target.setAttribute('data-option', -data.option);  
  75.           break;  
  76.   
  77.         case 'getCroppedCanvas':  
  78.           if (result) {  
  79.                 
  80.             fileImg = result.toDataURL('image/jpg');  
  81.             $("#showImg").attr("src",fileImg).show();  
  82.             $("#photoBtn").val("重新選擇");  
  83.           }  
  84.   
  85.           break;  
  86.   
  87.         case 'destroy':  
  88.             $("#inputImage").val("");  
  89.             $("#containerDiv").hide();  
  90.             $("#imgEdit").hide();  
  91.           break;  
  92.       }  
  93.   
  94.       if (typeof result === 'object' && result !== cropper && input) {  
  95.         try {  
  96.           input.value = JSON.stringify(result);  
  97.         } catch (e) {  
  98.           console.log(e.message);  
  99.         }  
  100.       }  
  101.   
  102.     }  
  103.   };  
  104.   
  105.   // Import image  
  106.   var inputImage = document.getElementById('inputImage');  
  107.   var URL = window.URL || window.webkitURL;  
  108.   var blobURL;  
  109.   
  110.   if (URL) {  
  111.     inputImage.onchange = function () {  
  112.       var files = this.files;  
  113.       var file;  
  114.   
  115.       if (cropper && files && files.length) {  
  116.         file = files[0];  
  117.   
  118.         if (/^image\/\w+/.test(file.type)) {  
  119.           blobURL = URL.createObjectURL(file);  
  120.           cropper.reset().replace(blobURL);  
  121.         } else {  
  122.           window.alert('Please choose an image file.');  
  123.         }  
  124.       }  
  125.       $(inputImage).find("img").hide();  
  126.     };  
  127.   } else {  
  128.     inputImage.disabled = true;  
  129.     inputImage.parentNode.className += ' disabled';  
  130.   }  
  131.   
  132. };  
[html]  view plain  copy
 
  1. $("#imgCutConfirm").bind("click",function(){  
  2. <span style="white-space:pre">    </span>$("#containerDiv").hide();  
  3.   <span style="white-space:pre"> </span>$("#imgEdit").hide();  
  4. <span style="white-space:pre">    </span>$("#getCroppedCanvasModal").modal("hide");  
  5. })  



 

獲取截圖 並ajax提交,  

 

[html]  view plain  copy
 
  1. //提交表達  
  2.     function submitForm(){  
  3.         $("#registerForm").attr("enctype","multipart/form-data");  
  4.           
  5.         var formData = new FormData($("#registerForm")[0]);  
  6.         formData.append("imgBase64",encodeURIComponent(fileImg));//  
  7.         formData.append("fileFileName","photo.jpg");  
  8.           
  9.           
  10.         $.ajax({    
  11.             url: "",  
  12.             type: 'POST',    
  13.             data: formData,    
  14.             timeout : 10000, //超時時間設置，單位毫秒  
  15.             async: true,    
  16.             cache: false,    
  17.             contentType: false,    
  18.             processData: false,   
  19.             success: function (result) {   
  20.             },    
  21.             error: function (returndata) {  
  22.             }  
  23.         });  
  24.     }  

 

使用canvas生成的截圖。我只找到生成base64的。就是那一長串字符。。

原本我想生成jpg / png ，，沒找到。  

后來找到在后台 把base64 的轉成jpg/png  的方法。

然后又把圖片上傳到七牛上面，發現可以使用二進制流上傳，就不用jpg了

  后台處理base64 java代碼片段

 

[html]  view plain  copy
 
  1. /**  
  2.      * 上傳base64   
  3.      * @param imgBase64 圖片base64  
  4.      * @param fileName 圖片名稱  
  5.      * @return  
  6.      */  
  7.     private String uploadImgBase64(String imgBase64,String fileName){  
  8.           
  9.         String uploadPath=FILEDATE;  
  10.         String fileExt = fileFileName.substring(fileFileName.lastIndexOf(".") + 1).toLowerCase();//上傳的文件的后綴  
  11.         String newFileName = fileName+ "." + fileExt;//上傳后的文件名字  
  12.         String uploadPathName = uploadPath + newFileName;//獲取到上傳后的文件路徑+文件名  
  13.           
  14.         BASE64Decoder decoder = new BASE64Decoder();  
  15.           
  16.         imgBase64 = imgBase64.substring(30);    
  17.           
  18.         try {  
  19.             imgBase64 = URLDecoder.decode(imgBase64,"UTF-8");  
  20.               
  21.             byte[] decodedBytes = decoder.decodeBuffer(imgBase64);// 將字符串格式的imagedata轉為二進制流（biye[])的decodedBytes  
  22.             for(int i=0;i<decodedBytes.length;++i){    
  23.                 if(decodedBytes[i]<0) {  
  24.                     //調整異常數據    
  25.                     decodedBytes[i]+=256;    
  26.                 }    
  27.             }  
  28.               
  29.             //使用七牛上傳  
  30.             new QiniuUploadFile().upload(decodedBytes, uploadPathName);  
  31.         } catch (IOException e) {  
  32.             e.printStackTrace();  
  33.         }   
  34.           
  35.         return uploadPathName;  
  36.           
  37.     }  

 

 

我參考的文章咻咻咻

 

1.jQuery簡單且功能強大的圖片剪裁插件          

2.英文copper  api 當找不到方法時，可以看這里，不要怕英文版的，實在不行你可以一個一個試過去看看效果哈哈。不會告訴你我就是這么干的。

 

 

3.HTML5 本地裁剪圖片並上傳至服務器（老梗）

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 基於cropper.js的圖片上傳和裁剪 基於cropper.js的圖片上傳和裁剪 cropper實現基本的裁剪圖片並上傳 【jQuery插件】使用cropper實現簡單的頭像裁剪並上傳 cropper.js圖片裁剪 html5 上傳頭像的裁剪 HTML5本地圖片裁剪並上傳 cropper.js圖片裁剪——第二彈 cropper.js裁剪圖片的使用 基於layui+cropper.js實現上傳圖片的裁剪功能
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM