使用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;
    }
}