碼上快樂

相關內容    簡體    繁體

使用jquery的imagecropper插件做用戶頭像上傳 兼容移動端

本文轉載自   查看原文   2016-04-29 16:38   1937 

在移動端開發的過程中，或許會遇到對圖片裁剪的問題。當然遇到問題問題，不管你想什么方法都是要進行解決的，哪怕是丑點，難看點，都得去解決掉。

圖片裁剪的jquery插件有很多，我也測試過很多，不過大多數都是支持pc端的圖片裁剪，而支持移動端圖片裁剪的少，很流暢的可能就會更少了。

作為一個新手，我嘗試了很多種解決方法，在初始的時候嘗試自己寫一個jquery插件支持觸屏事件等，寫出來了，但是覺得都不好意思拿出手，更別說拿出來商用了。

又嘗試找了一些插件，一個個試。最后綜合評價，感覺還不錯的jquery插件：cropper這個jquery創建。

看了一下感覺還是挺簡單的。demo:http://fengyuanchen.github.io/cropper/

下面就是我使用過程的一些代碼，希望能對大家有所幫助。

插件導入：

 
  1. <link rel="stylesheet" href="/css/delimg/cropper.css"/>
  2. <script src="/js/libs/jquery.min.js"></script>
  3. <script src="/js/delimg/cropper.js"></script>

必要的一點html代碼：

 
  1. <div class="img-container">
  2.     <img src="" alt="">
  3. </div>

注意：一般情況下，圖片會動態生成，所以當前的src值，為空。如果你是靜態圖片進行圖片截取，那就更簡單了。看下面代碼就懂了。

插件的使用（很簡單）：

 
  1. var $image = $('.img-container > img');
  3. $image.attr("src", imgurl);
  5. $image.on("load", function() {        // 等待圖片加載成功后，才進行圖片的裁剪功能
  6.     $image.cropper({
  7.         aspectRatio: 1 / 1　　// 1：1的比例進行裁剪，可以是任意比例，自己調整
  8.     });
  9. })

現在只是做了一個框架，最主要的是下面的代碼，獲取到圖片的數據才是最主要的，所以我們需要利用到canvas的特異功能，將圖片裁剪的部分轉化為base64的字符串進行前后端數據的交互。

然而，cropper並不會給你提供現成的base64字符串，但是他給你了一串的數據對象，供你自己任意發揮。

點擊某個按鈕時，確定剪裁這一高亮的部分：

 
  1. $(selector).on("tap", function() {
  2.     var src = $image.eq(0).attr("src");
  3.     var canvasdata = $image.cropper("getCanvasData");
  4.     var cropBoxData = $image.cropper('getCropBoxData');
  6.     convertToData(src, canvasdata, cropBoxData, function(basechar) {
  7.         // 回調后的函數處理        
  8.     });
  9. })

當然這也不是重點，重點是下面這個函數處理：

 
  1. function convertToData(url, canvasdata, cropdata, callback) {
  2.     var cropw = cropdata.width; // 剪切的寬
  3.     var croph = cropdata.height; // 剪切的寬
  4.     var imgw = canvasdata.width; // 圖片縮放或則放大后的高
  5.     var imgh = canvasdata.height; // 圖片縮放或則放大后的高
  7.     var poleft = canvasdata.left - cropdata.left; // canvas定位圖片的左邊位置
  8.     var potop = canvasdata.top - cropdata.top; // canvas定位圖片的上邊位置
  10.     var canvas = document.createElement("canvas");
  11.     var ctx = canvas.getContext('2d');
  13.     canvas.width = cropw;
  14.     canvas.height = croph;
  16.     var img = new Image();
  17.     img.src = url;
  19.     img.onload = function() {
  20.         this.width = imgw;
  21.         this.height = imgh;
  22.             // 這里主要是懂得canvas與圖片的裁剪之間的關系位置
  23.         ctx.drawImage(this, poleft, potop, this.width, this.height);
  24.         var base64 = canvas.toDataURL('image/jpg', 1);  // 這里的“1”是指的是處理圖片的清晰度（0-1）之間，當然越小圖片越模糊，處理后的圖片大小也就越小
  25.         callback && callback(base64)      // 回調base64字符串
  26.     }
  27. }

請看demo：http://www.asheep.cn/demo/cropper/

 
好啦，就到這里了，該處理的東西都處理了，當然這里一個放大縮小的正向處理剪裁，如果需要對圖片的旋轉等一些列的操作的話，也是可以得，這里只是給大家展示一個簡單的demo的實現，如果有用得上的，可以作為參考。

實現方案：使用jquery的imagecropper.js插件中裁剪功能來實現

imagecropper.js這個源碼我找了很久才找到http://pan.baidu.com/s/1oDqRO

代碼量很少就沒有寫注釋了

css

 
  1. <style>
  2. body
  3. {
  4.     padding: 0;
  5.     margin: 0;
  6.     height: 100%;
  7.     #eee;
  8.     font-size: 12px;
  9.     color: #666;
  10. }
  12. a
  13. {
  14.     text-decoration: none;
  15.     color: #333;
  16. }
  18. a:hover
  19. {
  20.     text-decoration: none;
  21.     color: #f00;
  22. }
  24. #container
  25. {
  26.     position: absolute;
  27.     left: 20px;
  28.     top: 20px;
  29. }
  31. #wrapper
  32. {
  33.     position: absolute;
  34.     left: 0px;
  35.     top: 40px;
  36. }
  38. #cropper
  39. {
  40.     position: absolute;
  41.     left: 0px;
  42.     top: 0px;
  43.     border: 1px solid #ccc;
  44. }
  46. #previewContainer
  47. {
  48.     position: absolute;
  49.     left: 350px;
  50.     top: 60px;
  51. }
  53. .preview
  54. {
  55.     border: 1px solid #ccc;
  56. }
  58. #selectBtn
  59. {
  60.     position: absolute;
  61.     left: 0px;
  62.     top: 0px;
  63.     width: 119px;
  64.     height: 27px;
  66. }
  68. #saveBtn
  69. {
  70.     position: absolute;
  71.     left: 150px;
  72.     top: 0px;
  73.     width: 67px;
  74.     height: 27px;
  76. }
  78. #rotateLeftBtn
  79. {
  80.     position: absolute;
  81.     left: 0px;
  82.     top: 315px;
  83.     width: 100px;
  84.     height: 22px;
  85.     padding-left: 25px;
  86.     padding-top: 2px;
  88. }
  90. #rotateRightBtn
  91. {
  92.     position: absolute;
  93.     left: 225px;
  94.     top: 315px;
  95.     width: 50px;
  96.     height: 22px;
  97.     padding-right: 25px;
  98.     padding-top: 2px;
  100. }
  102. </style>

html

 
  1. <body onload="init();">
  2.     <div id="container">
  3.         <a id="selectBtn" href="javascript:void(0);" onclick="document.getElementById('input').click();">選擇</a>
  4.         <a id="saveBtn" href="javascript:void(0);" onclick="saveImage();">保存</a>
  5.         <input type="file" id="input" size="10" style="visibility:hidden;" onchange="selectImage(this.files)" />
  7.         <div id="wrapper">
  8.             <canvas id="cropper"></canvas>
  9.             <a id="rotateLeftBtn" href="javascript:void(0);" onclick="rotateImage(event);">向左旋轉</a>
  10.             <a id="rotateRightBtn" href="javascript:void(0);" onclick="rotateImage(event);">向右旋轉</a>
  12.             <span id="status" style="position:absolute;left:350px;top:10px;width:100px;"></span>
  13.             <div id="previewContainer">
  14.                 <canvas id="preview180" width="180" height="180" class="preview"></canvas>
  15.                 <span style="display:block;width:100%;padding-top:5px;text-align:center;">大尺寸圖片，180x180像素</span>
  17.                 <canvas id="preview100" width="100" height="100" style="position:absolute;left:230px;top:0px;" class="preview"></canvas>
  18.                 <span style="position:absolute;left:230px;top:110px;width:100px;text-align:center;">中尺寸圖片 100x100像素</span>
  20.                 <canvas id="preview50" width="50" height="50" style="position:absolute;left:255px;top:150px;" class="preview"></canvas>
  21.                 <span style="position:absolute;left:245px;top:210px;width:70px;text-align:center;">小尺寸圖片 50x50像素</span>
  22.             </div>
  23.         </div>
  25.     </div>
  26. </body>

最后是js部分了

 
    1. var cropper;
    3. function init()
    4. {
    5.     //綁定
    6.     cropper = new ImageCropper(300, 300, 180, 180);
    7.     cropper.setCanvas("cropper");
    8.     cropper.addPreview("preview180");
    9.     cropper.addPreview("preview100");
    10.     cropper.addPreview("preview50");
    11.     //檢測用戶瀏覽器是否支持imagecropper插件
    12.     if(!cropper.isAvaiable())
    13.     {
    14.         alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
    15.     }
    16. }
    18. //打開本地圖片
    19. function selectImage(fileList)
    20. {
    21.     cropper.loadImage(fileList[0]);
    22. }
    24. //旋轉圖片
    25. function rotateImage(e)
    26. {
    27.     switch(e.target.id)
    28.     {
    29.         case "rotateLeftBtn":
    30.             cropper.rotate(-90);
    31.             break;
    32.         case "rotateRightBtn":
    33.             cropper.rotate(90);
    34.             break;
    35.     }
    36. }
    38. //上傳圖片
    39. function saveImage()
    40. {
    41.     //選個你需要的大小
    42.     var imgData = cropper.getCroppedImageData(180, 180);
    43.     console.log("上傳了："+imgData);
    44.     //在這里寫你的上傳代碼
    45. }


免責聲明！

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



猜您在找 SpringBoot用戶頭像上傳 JS 用戶頭像展示 黑馬在線教育項目---34-37、webuploader實現用戶頭像的異步上傳 基於steamworks獲取steam用戶頭像 GitLab用戶頭像不顯示問題 windows10刪除用戶頭像 js實現頭像上傳（移動端，PC端均可） 移動端 上傳頭像 並裁剪功能(h5) Django項目實戰 - 修改用戶頭像 小程序獲取用戶頭像和昵稱
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM