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

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

图片裁剪的jquery插件有很多，我也测试过很多，不过大多数都是支持pc端的图片裁剪，而支持移动端图片裁剪的少，很流畅的可能就会更少了。

作为一个新手，我尝试了很多种解决方法，在初始的时候尝试自己写一个jquery插件支持触屏事件等，写出来了，但是觉得都不好意思拿出手，更别说拿出来商用了。

又尝试找了一些插件，一个个试。最后综合评价，感觉还不错的jquery插件：cropper这个jquery创建。

看了一下感觉还是挺简单的。demo:http://fengyuanchen.github.io/cropper/

下面就是我使用过程的一些代码，希望能对大家有所帮助。

插件导入：

"stylesheet" href="/css/delimg/cropper.css"/>
"/js/libs/jquery.min.js">
"/js/delimg/cropper.js">

必要的一点html代码：

class="img-container">
    "" alt="">

注意：一般情况下，图片会动态生成，所以当前的src值，为空。如果你是静态图片进行图片截取，那就更简单了。看下面代码就懂了。

插件的使用（很简单）：

var $image = $('.img-container > img');

$image.attr("src", imgurl);

$image.on("load", function() {        // 等待图片加载成功后，才进行图片的裁剪功能
    $image.cropper({
        aspectRatio: 1 / 1　　// 1：1的比例进行裁剪，可以是任意比例，自己调整
    });
})

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

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

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

$(selector).on("tap", function() {
    var src = $image.eq(0).attr("src");
    var canvasdata = $image.cropper("getCanvasData");
    var cropBoxData = $image.cropper('getCropBoxData');

    convertToData(src, canvasdata, cropBoxData, function(basechar) {
        // 回调后的函数处理
    });
})

当然这也不是重点，重点是下面这个函数处理：

function convertToData(url, canvasdata, cropdata, callback) {
    var cropw = cropdata.width; // 剪切的宽
    var croph = cropdata.height; // 剪切的宽
    var imgw = canvasdata.width; // 图片缩放或则放大后的高
    var imgh = canvasdata.height; // 图片缩放或则放大后的高

    var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
    var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext('2d');

    canvas.width = cropw;
    canvas.height = croph;

    var img = new Image();
    img.src = url;

    img.onload = function() {
        this.width = imgw;
        this.height = imgh;
            // 这里主要是懂得canvas与图片的裁剪之间的关系位置
        ctx.drawImage(this, poleft, potop, this.width, this.height);
        var base64 = canvas.toDataURL('image/jpg', 1);  // 这里的“1”是指的是处理图片的清晰度（0-1）之间，当然越小图片越模糊，处理后的图片大小也就越小
        callback && callback(base64)      // 回调base64字符串
    }
}

请看demo：http://www.asheep.cn/demo/cropper/

 
好啦，就到这里了，该处理的东西都处理了，当然这里一个放大缩小的正向处理剪裁，如果需要对图片的旋转等一些列的操作的话，也是可以得，这里只是给大家展示一个简单的demo的实现，如果有用得上的，可以作为参考。

实现方案：使用jquery的imagecropper.js插件中裁剪功能来实现

imagecropper.js这个源码我找了很久才找到http://pan.baidu.com/s/1oDqRO

代码量很少就没有写注释了

css

</li> 
     <li>body</li> 
     <li class="alt">{ </li> 
     <li>    padding: <span class="number">0;</span></li> 
     <li class="alt">    margin: <span class="number">0;</span></li> 
     <li>    height: <span class="number">100%;</span></li> 
     <li class="alt">    #eee;</li> 
     <li>    font-size: 12px;</li> 
     <li class="alt">    color: #<span class="number">666;</span></li> 
     <li>}</li> 
     <li class="alt"> </li> 
     <li>a</li> 
     <li class="alt">{ </li> 
     <li>    text-decoration: none;</li> 
     <li class="alt">    color: #<span class="number">333;</span></li> 
     <li>}</li> 
     <li class="alt"> </li> 
     <li>a:hover</li> 
     <li class="alt">{ </li> 
     <li>    text-decoration: none;</li> 
     <li class="alt">    color: #f00;</li> 
     <li>}</li> 
     <li class="alt"> </li> 
     <li>#container</li> 
     <li class="alt">{ </li> 
     <li>    position: absolute;</li> 
     <li class="alt">    left: 20px;</li> 
     <li>    top: 20px;</li> 
     <li class="alt">}</li> 
     <li> </li> 
     <li class="alt">#wrapper</li> 
     <li>{ </li> 
     <li class="alt">    position: absolute;</li> 
     <li>    left: 0px;</li> 
     <li class="alt">    top: 40px;</li> 
     <li>}</li> 
     <li class="alt"> </li> 
     <li>#cropper</li> 
     <li class="alt">{ </li> 
     <li>    position: absolute;</li> 
     <li class="alt">    left: 0px;</li> 
     <li>    top: 0px;</li> 
     <li class="alt">    border: 1px solid #ccc;</li> 
     <li>}</li> 
     <li class="alt"> </li> 
     <li>#previewContainer</li> 
     <li class="alt">{ </li> 
     <li>    position: absolute;</li> 
     <li class="alt">    left: 350px;</li> 
     <li>    top: 60px;</li> 
     <li class="alt">}</li> 
     <li> </li> 
     <li class="alt">.preview</li> 
     <li>{ </li> 
     <li class="alt">    border: 1px solid #ccc;</li> 
     <li>}</li> 
     <li class="alt"> </li> 
     <li>#selectBtn</li> 
     <li class="alt">{ </li> 
     <li>    position: absolute;</li> 
     <li class="alt">    left: 0px;</li> 
     <li>    top: 0px;</li> 
     <li class="alt">    width: 119px;</li> 
     <li>    height: 27px;</li> 
     <li class="alt"> </li> 
     <li>}</li> 
     <li class="alt"> </li> 
     <li>#saveBtn</li> 
     <li class="alt">{ </li> 
     <li>    position: absolute;</li> 
     <li class="alt">    left: 150px;</li> 
     <li>    top: 0px;</li> 
     <li class="alt">    width: 67px;</li> 
     <li>    height: 27px;</li> 
     <li class="alt"> </li> 
     <li>}</li> 
     <li class="alt"> </li> 
     <li>#rotateLeftBtn</li> 
     <li class="alt">{ </li> 
     <li>    position: absolute;</li> 
     <li class="alt">    left: 0px;</li> 
     <li>    top: 315px;</li> 
     <li class="alt">    width: 100px;</li> 
     <li>    height: 22px;</li> 
     <li class="alt">    padding-left: 25px;</li> 
     <li>    padding-top: 2px;</li> 
     <li class="alt"> </li> 
     <li>}</li> 
     <li class="alt"> </li> 
     <li>#rotateRightBtn</li> 
     <li class="alt">{ </li> 
     <li>    position: absolute;</li> 
     <li class="alt">    left: 225px;</li> 
     <li>    top: 315px;</li> 
     <li class="alt">    width: 50px;</li> 
     <li>    height: 22px;</li> 
     <li class="alt">    padding-right: 25px;</li> 
     <li>    padding-top: 2px;</li> 
     <li class="alt"> </li> 
     <li>}</li> 
     <li class="alt"> </li> 
     <li>

html

"init();">
    "container">
        "selectBtn" href="javascript:void(0);" οnclick="document.getElementById('input').click();">选择
        "saveBtn" href="javascript:void(0);" οnclick="saveImage();">保存
        "file" id="input" size="10" style="visibility:hidden;" οnchange="selectImage(this.files)" />

        "wrapper">
            "cropper">
            "rotateLeftBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向左旋转
            "rotateRightBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向右旋转

            "status" style="position:absolute;left:350px;top:10px;width:100px;">
            "previewContainer">
                "preview180" width="180" height="180" class="preview">
                "display:block;width:100%;padding-top:5px;text-align:center;">大尺寸图片，180x180像素

                "preview100" width="100" height="100" style="position:absolute;left:230px;top:0px;" class="preview">
                "position:absolute;left:230px;top:110px;width:100px;text-align:center;">中尺寸图片 100x100像素

                "preview50" width="50" height="50" style="position:absolute;left:255px;top:150px;" class="preview">
                "position:absolute;left:245px;top:210px;width:70px;text-align:center;">小尺寸图片 50x50像素

        

    

最后是js部分了

 
       
       var cropper; 
         
       function init() 
       {  
           //绑定 
           cropper = new ImageCropper(300, 300, 180, 180); 
           cropper.setCanvas("cropper"); 
           cropper.addPreview("preview180"); 
           cropper.addPreview("preview100"); 
           cropper.addPreview("preview50"); 
           //检测用户浏览器是否支持imagecropper插件 
           if(!cropper.isAvaiable()) 
           {  
               alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it."); 
           } 
       } 
         
       //打开本地图片 
       function selectImage(fileList) 
       {  
           cropper.loadImage(fileList[0]); 
       } 
         
       //旋转图片 
       function rotateImage(e) 
       {  
           switch(e.target.id) 
           {  
               case "rotateLeftBtn": 
                   cropper.rotate(-90); 
                   break; 
               case "rotateRightBtn": 
                   cropper.rotate(90); 
                   break; 
           } 
       } 
         
       //上传图片 
       function saveImage() 
       {  
           //选个你需要的大小 
           var imgData = cropper.getCroppedImageData(180, 180); 
           console.log("上传了："+imgData); 
           //在这里写你的上传代码 
       }
var cropper;

function init()
{
    //绑定
    cropper = new ImageCropper(300, 300, 180, 180);
    cropper.setCanvas("cropper");
    cropper.addPreview("preview180");
    cropper.addPreview("preview100");
    cropper.addPreview("preview50");
    //检测用户浏览器是否支持imagecropper插件
    if(!cropper.isAvaiable())
    {
        alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
    }
}

//打开本地图片
function selectImage(fileList)
{
    cropper.loadImage(fileList[0]);
}

//旋转图片
function rotateImage(e)
{
    switch(e.target.id)
    {
        case "rotateLeftBtn":
            cropper.rotate(-90);
            break;
        case "rotateRightBtn":
            cropper.rotate(90);
            break;
    }
}

//上传图片
function saveImage()
{
    //选个你需要的大小
    var imgData = cropper.getCroppedImageData(180, 180);
    console.log("上传了："+imgData);
    //在这里写你的上传代码
}

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