使用Cropper裁剪图片并上传SSM【绝对能用】

第一步：引入css和js

• cropper.css 下载地址：https://github.com/fengyuanchen/cropperjs/tree/master/docs/css

• jquery.js

• cropper.js 下载地址：https://github.com/fengyuanchen/cropperjs/tree/master/docs/js

第二步：创建页面

<div style="width: 600px;height: 600px;"><!--必须通过父容器限定图像大小 -->
     <img id="imgTeset" src="">
</div>
<input type="file" id="fileHead" onchange="show(this)" />

第三步：编写加载本地图片部分

function show(a){
    var $file = $(a);
    var fileObj = $file[0];
    var windowURL = window.URL || window.webkitURL;
    var dataURL = null;
    if (!fileObj || !fileObj.files || !fileObj.files[0]){//没有选择图片
        return;
    }
    dataURL = windowURL.createObjectURL(fileObj.files[0]);
    $("#imgTeset").attr('src', dataURL);
    $('#imgTeset').cropper({
        aspectRatio: 1 / 1,
        viewMode: 1
    });
    $("#imgTeset").cropper('replace', dataURL);
}

第四步：增加调整按钮

<button type="button" onclick="$('#imgTeset').cropper('setDragMode','move')">移动</button>
<button type="button" onclick="horizontal()">水平翻转</button>
<button type="button" onclick="vertical()">垂直翻转</button>
<button type="button" onclick="cai()">裁剪</button>

var currentHorizontal=1;
var currentVertical=1;
//水平翻转
function horizontal(){
    currentHorizontal*=-1;
    $('#imgTeset').cropper('scaleX',currentHorizontal);
}
//垂直翻转
function vertical(){
    currentVertical*=-1;
    $('#imgTeset').cropper('scaleY',currentVertical);
}

第五步：裁剪并上传

function cai(){
    var size={width:128,height:128};//要裁剪成的图像大小
    var cas = $('#imgTeset').cropper('getCroppedCanvas',size);
    if(cas == null){
        alert("请选择图片");
        return false;
    }else{
        var base64url = cas.toDataURL('image/jpeg');//转换成图片格式
        $.ajax({
            url : "${pageContext.request.contextPath}/stu/cropper1",//上传地址
            dataType:'json',
            type: "post",
            data: {
                imgBase64 : base64url
            },
            success: function (data) {
                alert(data);
            }
        });
    }
}

第六步：服务器接收

@ResponseBody
@RequestMapping("/cropper1")
public String cropper1(String imgBase64,HttpServletRequest request){
    imgBase64 = imgBase64.split(",")[1];
    GenerateImage(imgBase64,request.getSession()
                  .getServletContext()
                  .getRealPath("WEB-INF/statics/images/temp")+"/cai.jpg");
    return "images/temp/cai.jpg";
}

public static boolean GenerateImage(String imgStr,String imgFilePath){
    if (imgStr == null) //图像数据为空
        return false;
    BASE64Decoder decoder = new BASE64Decoder();
    try{
        //Base64解码
        byte[] b = decoder.decodeBuffer(imgStr);
        for(int i=0;i<b.length;++i){
            if(b[i] < 0){//调整异常数据
                b[i] += 256;
            }
        }
        OutputStream out = new FileOutputStream(imgFilePath);
        out.write(b);
        out.flush();
        out.close();
        return true;
    }
    catch (Exception e){
        return false;
    }
}