cropper.js圖片裁剪

最近做電子名片的項目，可是個人照片展示上出現了 用戶上傳的圖片尺寸嚴重失調，所以要求進行圖片裁剪，再此我對圖片裁剪進行調研 還不太成熟 以后再改

這個實現的原理是 前台獲取到 坐標 圖片的尺寸 原圖文件 傳給后台進行裁剪

這個是我在網上找的一個插件 cropper功能很強大

 這里是官方文檔

首先使用cropper必須引入對應得css和js，還有jquery

<script src="jquery.js"></script>
<link  href="cropper.css" rel="stylesheet">
<script src="cropper.js"></script>

html結構，cropper是針對img得 所以配置項需要配置到img上

<div class="container">
    <img id="img" src="img/add-pic.png">
</div>

相對的js配置（這是項目里應用的部分 參數 如果以后有改動 需要根據API配置）

 $('.container > img').cropper({//這里是給img 即被裁剪的圖片進行參數配置
            aspectRatio: 720 / 425,//裁剪框的比例
            preview: $('.avatar-preview'),//預覽的容器
			minContainerHeight: 1080,//容器最小高度
			autoCropArea: 0.9,//初始化裁剪框大小（相對於圖片大小做比例）
			movable:false,//是否能移動裁剪框（這里是可以移動圖片 裁剪框處於不動的狀態 按你的需求設置）
			dragCrop:false,//不允許重新開裁剪框
            　　　　　　　resizable:false,//不允許改變裁剪框大小
            crop: function(data) {
                //data是 x,y width, height rotate scaleX scaleY裁剪框的坐標，以及裁剪出來的圖片長寬 旋轉角度 縮放等
                $('#x').val(data.x);
                $('#y').val(data.y);
                console.log('w'+data.width+'   height'+data.height);
            },
            //這幾個回調函數 
            build: function (e) { //是圖片繪制到cropper自動生成的canvas的開始   加載開始  
                //過渡效果  
            },  
            built: function (e) { //加載完成  繪制完成 獲取到相應的data
               
            }
         
        });            

　　效果圖：

並且移動圖片的過程中 會獲取到data

上傳的時候，使用了FromData 但是 在調用ajax的時候 會報錯 這個問題后來使用特別方式解決 以后研究

        var data = new FormData();
        data.append("x",Math.floor(myval('x')));
        data.append("y",Math.floor(myval('y')));
        data.append("w",Math.floor(myval('w')));
        data.append("h",Math.floor(myval('h')));

        data.append("file",$("#imgUpload")[0].files[0]);
        data.append("name",$("#imgUpload").val());
        data.append('jsonpcallback','a');

　由於會報錯 所以有人告訴我這樣一個方式 但是只能從error中獲取值

$.ajax({

    "type": 'post',
    "url": "imageCut",
    "dataType": "json",
    "data": data,
    // 告訴jQuery不要去處理發送的數據  發送了fromData對象
    processData : false,
    // 告訴jQuery不要去設置Content-Type請求頭
    contentType : false,
    success: function (resp) {
        console.log(resp)
    },
    error:function(data){
        if(data.status==200){
//這個就是裁剪后圖片的線上地址
           console.log(data.responseText); 
 }
 }

});

上傳的方式，

1.可以通過form表單的方式進行

2.ajax上傳（將圖片轉化為Base64編碼）

Demo 的HTML結構

<form action="http://172.16.105.43:8080/vcard/imageCut" enctype="multipart/form-data" method="post"  id="form">
               <div class="pic">
                   <a href="javascript:void(0)" class="add"><input type="file" name="file" id="imgUpload"/></a>
                   <div class="mask_box">
                       <div class="container">
                           <img id="img" src="img/add-pic.png">
                       </div>
                       <input type="hidden" name="x"  id="x" value="0"/>
                       <input type="hidden" name="y"  id="y" value="0"/>
                       <input type="hidden" name="w"  id="w" value="720"/>
                       <input type="hidden" name="h"  id="h" value="425"/>
                       <div class="btn_submit"><span onclick="cancel()" >取消</span><span class="right" onclick="upload()">完成</span></div>
                   </div>
               </div>
</form>

 

關於利用表單提交 裁剪以后的圖片base64碼，鏈接戳這里