zoukankan      html  css  js  c++  java

  • 使用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');
    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.      119px;
    64.     height: 27px;
    66. }
    68. #saveBtn
    69. {
    70.     position: absolute;
    71.     left: 150px;
    72.     top: 0px;
    73.      67px;
    74.     height: 27px;
    76. }
    78. #rotateLeftBtn
    79. {
    80.     position: absolute;
    81.     left: 0px;
    82.     top: 315px;
    83.      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.      50px;
    96.     height: 22px;
    97.     padding-right: 25px;
    98.     padding-top: 2px;
    100. }
    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)" />
    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>
    12.             <span id="status" style="position:absolute;left:350px;top:10px;100px;"></span>
    13.             <div id="previewContainer">
    14.                 <canvas id="preview180" width="180" height="180" class="preview"></canvas>
    15.                 <span style="display:block;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;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;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. }
  • 相关阅读:
    [引]ASP.NET MVC 4 Content Map
    [转]ASP.NET MVC 2: Model Validation
    [转]ASP.NET MVC中你必须知道的13个扩展点
    [转]Best way to sort a DropDownList in MVC3 / Razor using helper method
    [转]Sql Server参数化查询之where in和like实现详解
    [转]Oracle Stored Procedures Hello World Examples
    [转]oracle的ANYDATA数据类型
    重构中对设计模式的反思
    poj2186 Popular Cows --- 强连通
    mac下通过xcodebuild使用oclint
  • 原文地址：https://www.cnblogs.com/eason1999/p/5446807.html
Copyright © 2011-2022 走看看