登录
当前位置： 首页 > 工具软件 > jQuery Image Cropper > 使用案例 >

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

方承弼
2023-12-01

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

图片裁剪的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 οnlοad="init();">
  2.     <div id="container">
  3.         <a id="selectBtn" href="javascript:void(0);" οnclick="document.getElementById('input').click();">选择</a>
  4.         <a id="saveBtn" href="javascript:void(0);" οnclick="saveImage();">保存</a>
  5.         <input type="file" id="input" size="10" style="visibility:hidden;" οnchange="selectImage(this.files)" />
  7.         <div id="wrapper">
  8.             <canvas id="cropper"></canvas>
  9.             <a id="rotateLeftBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向左旋转</a>
  10.             <a id="rotateRightBtn" href="javascript:void(0);" οnclick="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. }

转载于:https://www.cnblogs.com/eason1999/p/5446807.html

 类似资料：

相关阅读

使用jQuery ajax上传图像的建议在Flask中使用用户上传的图像使用jQuery Ajax上传文件JS上传图片预览插件制作（兼容到IE6）使用Nightwatch.js上传图像文件

相关文章

右值引用、移动语义、完美转发（上篇）PHP 文件上传JSP文件上传Struts2 文件上传Flask文件上传

相关问答

从移动应用程序上传图像到AWS S3IntelliJ lombok插件不兼容使用Selenium自动上传图像，但不使用AutoIt使用alamofire上传图像使用箭头键移动圆-Java

相关文档

用户画像小米用户画像+服务使用文档如何编写 jQuery 插件像 IDE 样使用 VIM如何使用 Gitbook 来做笔记
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.