最近做電子名片的項目,可是個人照片展示上出現了 使用者上傳的圖檔尺寸嚴重失調,是以要求進行圖檔裁剪,再此我對圖檔裁剪進行調研 還不太成熟 以後再改
這個實作的原理是 前台擷取到 坐标 圖檔的尺寸 原圖檔案 傳給背景進行裁剪
這個是我在網上找的一個插件 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
}
});
效果圖:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5CN4ETM1kzY4cjMxEGZmRzYyYzXzMjMxETM2AzLcdDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
并且移動圖檔的過程中 會擷取到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>