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

图片裁剪的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. #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(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. 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(180, 180);
    39. console.log("上传了："+imgData);
    40. //在这里写你的上传代码
    41. }

使用jquery的imagecropper插件做用户头像上传 兼容移动端的更多相关文章

  1. jquery.form 和MVC4做无刷新上传DEMO

    jquery.form 和MVC4做无刷新上传DEMO HTML: <script src="~/Scripts/jquery-1.10.2.min.js"></ ...

  2. spring--mvc添加用户及用户头像上传

    spring--mvc添加用户及用户头像上传 添加用户步骤: 1.用ajax获取省份信息 2.添加用户 代码:register.jsp <meta http-equiv="Conten ...

  3. PHP+ajaxfileupload与jcrop插件结合 完成头像上传

    昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果

  4. Django项目实战之用户头像上传与访问

      1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> < ...

  5. JQUery利用Uploadify插件实现文件异步上传（十一）

    一:简介: Uploadify是JQuery的一个上传插件,实现的效果非常好,带进度显示 ,且Ajax异步,能一次性上传多个文件,功能强大,使用简单 1.支持单文件或多文件上传,可控制并发上传的文件数 ...

  6. Django用户头像上传

    1 将文件保存到服务器本地 upload.html ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html ...

  7. Django项目实战—用户头像上传

    1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. jquery的uploadify插件实现的批量上传V3.2.1版

    你需要如下配置(包括引入文件)HTML: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&quo ...

  9. Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...

随机推荐

  1. 使用C语言在windows下一口气打开一批网页

    作者:郝峰波 mail : fengbohello@qq.com 本博客地址:http://www.cnblogs.com/fengbohello/p/4374450.html 1.核心函数说明 核心 ...

  2. SpringMVC原理和框架

    SpringMVC工作原理 在上一篇章[spring]01_环境配置 中,我们演示了一个简单的HelloWorld工程. 本篇章重点讲述SpringMVC的基本工作原理,让大家进一步加深认识. 工作流 ...

  3. 这世上倒底有没有神仙——说“Excel不是数据库，是不是犯了白马非马论的错误？？

    这问题是这样引出来的: 我上计算机应用基础课,讲到Excel,因为一直以来,很多新生对Word中的表格和Excel中的表格总是分不清,甚至有老师也问过我,Excel中的表格和Word中的表格有什么区别 ...

  4. 如何将maven项目导入MyEclipse

    一.安装maven第一步:下载一个免安装版的apache-maven-3.0.3.zip解压后,配置环境变量 新建M2_HOME:   在path后面添加  %M2_HOME%\bin;   第二步: ...

  5. C++ substr() 和 Java substring() 区别

    Java和C++中都有关于子字符串的操作,C++中是substr(),Java中是substring(),两者的用法上稍有些区别,首先针对只有一个参数的情况: s.substr(start) 和 s. ...

  6. [转载]学习VC MFC开发必须了解的常用宏和指令————复习一下

    1.#include指令  包含指定的文件 2.#define指令   预定义,通常用它来定义常量(包括无参量与带参量),以及用来实现那些“表面似和善.背后一长串”的宏,它本身并不在编译过程中进行,而 ...

  7. AJAX 后台返回多种数据

    前台ajax(jsp文件): (1) $.ajax({ type: "POST", url: "/dragable/demo/finishTopo", asyn ...

  8. Zabbix自带模板监控MySQL

    先使用主机链接Mysql模板 . 然后写获取mysql状态的脚本,即配合zabbix模板里面的参数的脚本. #!/bin/bash MYSQL_USER='zabbix' #这里为在本地数据库授权的账 ...

  9. 创建 PDO 实例并在构造函数中设置错误模式

    PDO 将只简单地设置错误码,可使用 PDO::errorCode() 和 PDO::errorInfo() 方法来检查语句和数据库对象.如果错误是由于对语句对象的调用而产生的,那么可以调用那个对象的 ...

  10. Web前端开发基础 第四课（CSS文字和段落排版）

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...