图片裁剪上传插件—jquery.photoClip.js

分别介绍了两种插件

1.cropper.js

具体详情:https://segmentfault.com/a/1190000012344970

(1)在页面直接使用cropper    

接下来只是实现一个简单的功能：网页中可以上传图片，然后对图片进行裁剪，点击确定后会显示出裁剪后的图片。

   

       

           
            选择图片
           
           
       

   

   

       

           
       

       

           

               

                    预览(100*100)：
               

               

               

           

            裁剪图片
           

               

               

                    结果：
               

               
           

       

   

(2)在bootstrap模态框中使用cropper

打开

   

   

       

            ×
           

           
                        更换头像
           

       

       

           

                未选择图片
           

           

               
           

           

               

---

                150*150:
               

               

                100*100:
               

               

                30*30:
               

               

           

       

       

           
           
            打开图片
           
            提交
            取消
       

   

  

使用cropper来上传图片到服务器

由于cropper可以得到两种裁剪后图片的数据（即blob和dataURL），所以对应的上传到后台也会有两种方法，在这里我只写一种使用ajax上传base64 dataURL的，另一种方法如果有兴趣，可以自己尝试。

页面中，将上面的sendPhoto方法改为：

上传方式(1)：

var sendPhoto = function () {
    // 得到PNG格式的dataURL
    var photo = $('#photo').cropper('getCroppedCanvas', {
        width: 300,
        height: 300
    }).toDataURL('image/png');

    $.ajax({
        url: '上传地址', // 要上传的地址
        type: 'post',
        data: {
            'imgData': photo
        },
        dataType: 'json',
        success: function (data) {
            if (data.status == 0) {
                // 将上传的头像的地址填入，为保证不载入缓存加个随机数
                $('.user-photo').attr('src', '头像地址?t=' + Math.random());
                $('#changeModal').modal('hide');
            } else {
                alert(data.info);
            }
        }
    });
}

上传方式(2)

通过$img.cropper(“getCroppedCanvas”)获取到canvas并调用其toBlob方法将数据转化为二进制用来构造FormData

<script>

$img.cropper("getCroppedCanvas").toBlob(function(blob){

var formData=new FormData();

formData.append('files',blob,file.name);

$.ajax({

method:"post",

url: urlConfig.upload, //用于文件上传的服务器端请求地址

data: formData,

processData: false,

contentType: false,

success:function(result){

//do something

}

});

});

script>

后台中，Java的主要代码如下：（使用了jdk8的Base64,，如果是低版本请自行替换）

/**
     * 将Base64位编码的图片进行解码，并保存到指定目录
     */
    public static void decodeBase64DataURLToImage(String dataURL, String path, String imgName) throws IOException {
        // 将dataURL开头的非base64字符删除
        String base64 = dataURL.substring(dataURL.indexOf(",") + 1);
        FileOutputStream write = new FileOutputStream(new File(path + imgName));
        byte[] decoderBytes = Base64.getDecoder().decode(base64);
        write.write(decoderBytes);
        write.close();
    }

2.photoClip.js

需要依赖的的插件为：

[jquery.transit.js] 插件 （v1.4 中已经移除了对该插件的依赖）

[iscroll-zoom.js] 插件（由于原插件的zoom扩展存在几个bug，所以建议使用demo中提供的iscroll-zoom.js文件，本人已经将这些bug修复）

[hammer.js] 插件 

[lrz.all.bundle.js] 插件

参数讲解:

< div  id = "clipArea" > div >

< input  type = "file"  id = "file" >
< button  id = "clipBtn" >截取 button >

< div  id = "view" > div >

< script  src = "js/jquery-2.1.3.min.js" > script >

< script  src = "js/hammer.min.js" > script >

< script  src = "js/iscroll-zoom.min.js" > script >

< script  src = "js/lrz.all.bundle.js" > script >

< script  src = "js/jquery.photoClip.min.js" > script >

< script >
var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [260, 260], // 截取框的宽和高组成的数组。默认值为[260,260]
    outputSize: [640, 640], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
    //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
    file: "#file", // 上传图片的< input  type = "file" >控件的选择器或者DOM对象
    view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
    ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
    loadStart: function(file) {}, // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
    loadComplete: function(src) {}, // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
    loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
    clipFinish: function(dataURL) {}, // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
});
script >