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

图片裁剪的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. "" 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. 1 / 1　　// 1：1的比例进行裁剪，可以是任意比例，自己调整
8.     });
9. })


现在只是做了一个框架，最主要的是下面的代码，获取到图片的数据才是最主要的，所以我们需要利用到canvas的特异功能，将图片裁剪的部分转化为base64的字符串进行前后端数据的交互。

然而，cropper并不会给你提供现成的base64字符串，但是他给你了一串的数据对象，供你自己任意发挥。

点击某个按钮时，确定剪裁这一高亮的部分：



  

1. $(selector).on("tap", function() {
2. 0).attr("src");
3. "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. // 剪切的宽
3. // 剪切的宽
4. // 图片缩放或则放大后的高
5. // 图片缩放或则放大后的高
6. 
7. // canvas定位图片的左边位置
8. // canvas定位图片的上边位置
9. 
10. "canvas");
11.     var ctx = canvas.getContext('2d');
12. 
13.     canvas.width = cropw;
14.     canvas.height = croph;
15. 
16. new Image();
17.     img.src = url;
18. 
19.     img.onload = function() {

20. this.width = imgw;
21. this.height = imgh;
22. // 这里主要是懂得canvas与图片的裁剪之间的关系位置
23. this, poleft, potop, this.width, this.height);
24. 1);  // 这里的“1”是指的是处理图片的清晰度（0-1）之间，当然越小图片越模糊，处理后的图片大小也就越小
25. // 回调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. 0;
5. 0;
6. 100%;
7.     #eee;
8.     font-size: 12px;
9. 666;
10. }
11. 
12. a
13. {

14.     text-decoration: none;
15. 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 οnlοad="init();">
2. "container">
3. "selectBtn" href="javascript:void(0);" οnclick="document.getElementById('input').click();">选择</a>
4. "saveBtn" href="javascript:void(0);" οnclick="saveImage();">保存</a>
5. "file" id="input" size="10" style="visibility:hidden;" οnchange="selectImage(this.files)" />
6. 
7. "wrapper">
8. "cropper"></canvas>
9. "rotateLeftBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向左旋转</a>
10. "rotateRightBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向右旋转</a>
11. 
12. "status" style="position:absolute;left:350px;top:10px;width:100px;"></span>
13. "previewContainer">
14. "preview180" width="180" height="180" class="preview"></canvas>
15. "display:block;width:100%;padding-top:5px;text-align:center;">大尺寸图片，180x180像素</span>
16. 
17. "preview100" width="100" height="100" style="position:absolute;left:230px;top:0px;" class="preview"></canvas>
18. "position:absolute;left:230px;top:110px;width:100px;text-align:center;">中尺寸图片 100x100像素</span>
19. 
20. "preview50" width="50" height="50" style="position:absolute;left:255px;top:150px;" class="preview"></canvas>
21. "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. 
3. function init()
4. {

5. //绑定
6. new ImageCropper(300, 300, 180, 180);
7. "cropper");
8. "preview180");
9. "preview100");
10. "preview50");
11. //检测用户浏览器是否支持imagecropper插件
12. if(!cropper.isAvaiable())
13.     {

14. "Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
15.     }
16. }
17. 
18. //打开本地图片
19. function selectImage(fileList)
20. {

21. 0]);
22. }
23. 
24. //旋转图片
25. function rotateImage(e)
26. {

27. switch(e.target.id)
28.     {

29. case "rotateLeftBtn":
30. 90);
31. break;
32. case "rotateRightBtn":
33. 90);
34. break;
35.     }
36. }
37. 
38. //上传图片
39. function saveImage()
40. {

41. //选个你需要的大小
42. 180, 180);
43. "上传了："+imgData);
44. //在这里写你的上传代码
45. }