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

前端开发 14304 Views 9 Comments

在移动端开发的过程中,或许会遇到对图片裁剪的问题。当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉。

图片裁剪的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. $image.attr("src", imgurl);
  3. $image.on("load", function() {        // 等待图片加载成功后,才进行图片的裁剪功能
  4.     $image.cropper({
  5.         aspectRatio: 1 / 1  // 1:1的比例进行裁剪,可以是任意比例,自己调整
  6.     });
  7. })

现在只是做了一个框架,最主要的是下面的代码,获取到图片的数据才是最主要的,所以我们需要利用到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.     convertToData(src, canvasdata, cropBoxData, function(basechar) {
  6.         // 回调后的函数处理        
  7.     });
  8. })

当然这也不是重点,重点是下面这个函数处理:

  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.     var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
  7.     var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置
  8.     var canvas = document.createElement("canvas");
  9.     var ctx = canvas.getContext('2d');
  10.     canvas.width = cropw;
  11.     canvas.height = croph;
  12.     var img = new Image();
  13.     img.src = url;
  14.     img.onload = function() {
  15.         this.width = imgw;
  16.         this.height = imgh;
  17.             // 这里主要是懂得canvas与图片的裁剪之间的关系位置
  18.         ctx.drawImage(this, poleft, potop, this.width, this.height);
  19.         var base64 = canvas.toDataURL('image/jpg', 1);  // 这里的“1”是指的是处理图片的清晰度(0-1)之间,当然越小图片越模糊,处理后的图片大小也就越小
  20.         callback && callback(base64)      // 回调base64字符串
  21.     }
  22. }

请看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.     background-color: #eee;
  8.     font-size: 12px;
  9.     color: #666;
  10. }
  11. a
  12. {
  13.     text-decoration: none;
  14.     color: #333;
  15. }
  16. a:hover
  17. {
  18.     text-decoration: none;
  19.     color: #f00;
  20. }
  21. #container
  22. {
  23.     position: absolute;
  24.     left: 20px;
  25.     top: 20px;
  26. }
  27. #wrapper
  28. {
  29.     position: absolute;
  30.     left: 0px;
  31.     top: 40px;
  32. }
  33. #cropper
  34. {
  35.     position: absolute;
  36.     left: 0px;
  37.     top: 0px;
  38.     border: 1px solid #ccc;
  39. }
  40. #previewContainer
  41. {
  42.     position: absolute;
  43.     left: 350px;
  44.     top: 60px;
  45. }
  46. .preview
  47. {
  48.     border: 1px solid #ccc;
  49. }
  50. #selectBtn
  51. {
  52.     position: absolute;
  53.     left: 0px;
  54.     top: 0px;
  55.     width: 119px;
  56.     height: 27px;
  57. }
  58. #saveBtn
  59. {
  60.     position: absolute;
  61.     left: 150px;
  62.     top: 0px;
  63.     width: 67px;
  64.     height: 27px;
  65. }
  66. #rotateLeftBtn
  67. {
  68.     position: absolute;
  69.     left: 0px;
  70.     top: 315px;
  71.     width: 100px;
  72.     height: 22px;
  73.     padding-left: 25px;
  74.     padding-top: 2px;
  75. }
  76. #rotateRightBtn
  77. {
  78.     position: absolute;
  79.     left: 225px;
  80.     top: 315px;
  81.     width: 50px;
  82.     height: 22px;
  83.     padding-right: 25px;
  84.     padding-top: 2px;
  85. }
  86. </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.         <div id="wrapper">
  7.             <canvas id="cropper"></canvas>
  8.             <a id="rotateLeftBtn" href="javascript:void(0);" onclick="rotateImage(event);">向左旋转</a>
  9.             <a id="rotateRightBtn" href="javascript:void(0);" onclick="rotateImage(event);">向右旋转</a>
  10.             <span id="status" style="position:absolute;left:350px;top:10px;width:100px;"></span>
  11.             <div id="previewContainer">
  12.                 <canvas id="preview180" width="180" height="180" class="preview"></canvas>
  13.                 <span style="display:block;width:100%;padding-top:5px;text-align:center;">大尺寸图片,180x180像素</span>
  14.                 <canvas id="preview100" width="100" height="100" style="position:absolute;left:230px;top:0px;" class="preview"></canvas>
  15.                 <span style="position:absolute;left:230px;top:110px;width:100px;text-align:center;">中尺寸图片 100x100像素</span>
  16.                 <canvas id="preview50" width="50" height="50" style="position:absolute;left:255px;top:150px;" class="preview"></canvas>
  17.                 <span style="position:absolute;left:245px;top:210px;width:70px;text-align:center;">小尺寸图片 50x50像素</span>
  18.             </div>
  19.         </div>
  20.     </div>
  21. </body>

最后是js部分了

  1. var cropper;
  2. function init()
  3. {
  4.     //绑定
  5.     cropper = new ImageCropper(300300180180);
  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. function selectImage(fileList)
  18. {
  19.     cropper.loadImage(fileList[0]);
  20. }
  21. //旋转图片
  22. function rotateImage(e)
  23. {
  24.     switch(e.target.id)
  25.     {
  26.         case "rotateLeftBtn":
  27.             cropper.rotate(-90);
  28.             break;
  29.         case "rotateRightBtn":
  30.             cropper.rotate(90);
  31.             break;
  32.     }
  33. }
  34. //上传图片
  35. function saveImage()
  36. {
  37.     //选个你需要的大小
  38.     var imgData = cropper.getCroppedImageData(180180);
  39.     console.log("上传了:"+imgData);
  40.     //在这里写你的上传代码
  41. }

转载请注明:一只羊博客 » 使用jquery的imagecropper插件做用户头像上传 兼容移动端

分享到:
(65)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (9)

  1. 这个src的路径,有限制吗?外部加载的图片应该怎么做

    huangwj2017-02-14 16:41 (5天前)回复
  2. 楼主在吗?在PC端功能基本都有了,我通过在地址前面加上电脑IP 在手机微信端打开,中间可伸缩的框 不能拖拽,裁剪功能实现不了,怎么回事?

    念想2016-11-22 10:50 回复
  3. 楼主,你new 的那个 ImageCropper 在哪里?

    大哥教教我2016-11-02 17:04 回复
  4. 请问第一个案例旋转怎么做

    小Z2016-10-10 18:10 回复
    • demo里有方法提示啊:$().cropper(“rotate”, 45)

      一只羊2016-10-14 11:05 回复
      • 楼主在吗?在PC端功能基本都有了,我通过在地址前面加上电脑IP 在手机微信端打开,中间可伸缩的框 不能拖拽,裁剪功能实现不了,怎么回事?

        念想2016-11-22 11:04 回复
  5. 大哥 插件去哪下载啊

    嘿嘿2016-05-26 10:55 回复
  6. 非常不错!感谢!

    AdOnCn2016-02-09 12:18 回复
  7. 学习借鉴下 :grin:

    爆实惠2015-11-23 14:43 回复