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

    相信大多的用户系统里都有用户自定义头像上传这个功能，我这今天也在写这块，我将代码贴出来，方便以后大家借鉴。

    实现方案：使用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. }
    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 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;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. }