夏日博客

A-A+

使用jquery的imagecropper插件做用户头像上传 兼容移动端

2016年01月13日 前端设计 暂无评论 阅读 6 views 次

imagecropper插件是一个非常好用的插件了我们可以通过imagecropper插件来上传头像并进行剪切了，下面来一个兼容移动端jquery的imagecropper插件做用户头像上传的例子。

在移动端开发的过程中，或许会遇到对图片裁剪的问题。当然遇到问题问题，不管你想什么方法都是要进行解决的，哪怕是丑点，难看点，都得去解决掉,图片裁剪的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');    
  2.          
  3. $image.attr("src", imgurl);        
  4.     
  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');    
  5.         
  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; // 图片缩放或则放大后的高    
  6.         
  7.     var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置    
  8.     var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置    
  9.         
  10.     var canvas = document.createElement("canvas");    
  11.     var ctx = canvas.getContext('2d');    
  12.         
  13.     canvas.width = cropw;    
  14.     canvas.height = croph;    
  15.         
  16.     var img = new Image();    
  17.     img.src = url;    
  18.         
  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的实现,如果有用得上的,可以作为参考.

实现方案:使用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.     background-color: #eee;    
  8.     font-size: 12px;    
  9.     color: #666;    
  10. }    
  11.     
  12. a    
  13. {    
  14.     text-decoration: none;    
  15.     color: #333;    
  16. }    
  17.     
  18. a:hover    
  19. {    
  20.     text-decoration: none;    
  21.     color: #f00;    
  22. }    
  23.     
  24. #container    
  25. {    
  26.     position: absolute;    
  27.     left: 20px;    
  28.     top: 20px;    
  29. }    
  30.     
  31. #wrapper    
  32. {    
  33.     position: absolute;    
  34.     left: 0px;    
  35.     top: 40px;    
  36. }    
  37.     
  38. #cropper    
  39. {    
  40.     position: absolute;    
  41.     left: 0px;    
  42.     top: 0px;    
  43.     border: 1px solid #ccc;    
  44. }    
  45.     
  46. #previewContainer    
  47. {    
  48.     position: absolute;    
  49.     left: 350px;    
  50.     top: 60px;    
  51. }    
  52.     
  53. .preview    
  54. {    
  55.     border: 1px solid #ccc;    
  56. }    
  57.     
  58. #selectBtn    
  59. {    
  60.     position: absolute;    
  61.     left: 0px;    
  62.     top: 0px;    
  63.     width: 119px;    
  64.     height: 27px;    
  65.     
  66. }    
  67.     
  68. #saveBtn    
  69. {    
  70.     position: absolute;    
  71.     left: 150px;    
  72.     top: 0px;    
  73.     width: 67px;    
  74.     height: 27px;    
  75.     
  76. }    
  77.     
  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;    
  87.     
  88. }    
  89.     
  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;    
  99.     
  100. }    
  101.     
  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)" />    
  6.     
  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>    
  11.     
  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>    
  16.     
  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>    
  19.     
  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>    
  24.     
  25.     </div>    
  26. </body>  

最后是js部分了.

  1. var cropper;    
  2. function init()    
  3. {       
  4.     //绑定    
  5.     cropper = new ImageCropper(300, 300, 180, 180);    
  6.     cropper.setCanvas("cropper");    
  7.     cropper.addPreview("preview180");    
  8.     cropper.addPreview("preview100");    
  9.     cropper.addPreview("preview50");    
  10.     //检测用户浏览器是否支持imagecropper插件    
  11.     if(!cropper.isAvaiable())    
  12.     {    
  13.         alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");    
  14.     }    
  15. }    
  16.     
  17. //打开本地图片    
  18. function selectImage(fileList)    
  19. {    
  20.     cropper.loadImage(fileList[0]);    
  21. }    
  22.     
  23. //旋转图片    
  24. function rotateImage(e)    
  25. {    
  26.     switch(e.target.id)    
  27.     {    
  28.         case "rotateLeftBtn":    
  29.             cropper.rotate(-90);    
  30.             break;    
  31.         case "rotateRightBtn":    
  32.             cropper.rotate(90);    
  33.             break;    
  34.     }    
  35. }    
  36.     
  37. //上传图片    
  38. function saveImage()    
  39. {    
  40.     //选个你需要的大小    
  41.     var imgData = cropper.getCroppedImageData(180, 180);    
  42.     console.log("上传了："+imgData);    
  43.     //在这里写你的上传代码    
  44. }  
标签：

给我留言