前陣子七夕的時候搞了一個h5活動頁透葛，需要做一個本地圖片的裁剪上傳功能贷揽，用于生成一些特定的表白圖片拆撼。主要是用到了H5的FileApi 和 Canvas施无。個人感覺圖片裁剪功能還是很實用的辉词，故寫篇文章分享一下。
demo地址：https://github.com/Bless-L/img-clipping
效果gif：
（PS：這個demo本來是移動端的猾骡，但了為了方便錄制效果瑞躺，所以我用chrome模擬地跑了一下。
還有就是demo是配合Vue實現(xiàn)的兴想，因為我是直接在項目中復(fù)制過來改改的幢哨，就懶得轉(zhuǎn)換了）
圖片讀取
要裁剪首先肯定就是讀取圖片文件。其實也很簡單嫂便，用一個input指定為file類型就可以了捞镰。
<input type="file" class="file" accept="image/*;capture=camera" name="img" @change="clipImg($event)">
//Vue里面的methods
clipImg(event){
this.clip = new Clip('container',this);
this.clip.init(event.target.files[0]);
this.isClip = true;
document.body.addEventListener('touchmove',this.noScoll,false);
},
然后就是處理獲得的文件
//這些方法是寫在Clip類里面的
handleFiles(file){
let t = this;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
t.imgUrl = this.result;
t.paintImg(this.result);
}
}
先新建一個FileReader類，然后把讀得的文件用readAsDataURL轉(zhuǎn)換為base64編碼，再通過paintImg方法進(jìn)行繪制處理岸售。
需要注意的是文件讀取是異步的几迄，所以讀取后的操作需要在onload函數(shù)中進(jìn)行。
繪制裁剪界面
初始化
先是初始化一些基本參數(shù)
//初始化
init(file){
this.sx = 0; //裁剪框的初始x
this.sy = 0; //裁剪框的初始y
this.sWidth = 233; //裁剪框的寬
this.sHeight = 175; //裁剪框的高
this.chooseBoxScale = 233/175;//裁剪框的寬高比
this.handleFiles(file);
}
在這里裁剪框的比例是固定的4：3冰评，有需要的同學(xué)可以自行更改映胁。至于寬高那個是先照著設(shè)計稿設(shè)一個數(shù)值，后面會根據(jù)不同的圖片而重新設(shè)置甲雅。
繪制裁剪界面
paintImg(picUrl){
//other code
//.....
img.onload = function() {
let imgScale = img.width / img.height;
let boxScale = t.regional.offsetWidth / t.regional.offsetHeight;
//判斷盒子與圖片的比列
if (imgScale < boxScale) {
//設(shè)置圖片的像素
t.imgWidth = t.regional.offsetHeight * imgScale;
t.imgHeight = t.regional.offsetHeight;
} else {
//設(shè)置圖片的像素
t.imgWidth = t.regional.offsetWidth;
t.imgHeight = t.regional.offsetWidth / imgScale;
}
//判斷圖片與選擇框的比例大小解孙，作出裁剪
if (imgScale < t.chooseBoxScale) {
//設(shè)置選擇框的像素
t.sWidth = t.imgWidth;
t.sHeight = t.imgWidth / t.chooseBoxScale;
//設(shè)置初始框的位置
t.sx = 0;
t.sy = (t.imgHeight - t.sHeight) / 2;
} else {
//設(shè)置選擇框的像素
t.sWidth = t.imgHeight * t.chooseBoxScale;
t.sHeight = t.imgHeight;
t.sx = (t.imgWidth - t.sWidth) / 2;
t.sy = 0;
}
//(1)
}
這段代碼比較長。
先說一下裁剪界面的結(jié)構(gòu)抛人〕诮看那demo及動圖可以知道，裁剪界面中妖枚，首先有一個最外層的容器廷臼，裝著圖片，即id為container的div绝页，稱為1荠商；
然后是圖片容器，即id為image-box的canvas续誉，稱為2莱没；
最后是最外面被掏空裁剪區(qū)域的模糊層，即id為cover-box的canvas酷鸦，稱為3饰躲。
這幾個容器中，1的寬高是固定的臼隔。而2則在保證比例不變的情況下有一邊占滿整個1嘹裂。所以可以看到上面那段判斷盒子與圖片比列的代碼是在實現(xiàn)這個顯示方式。
同時可以看到3的裁剪區(qū)域也是同理的摔握，在保證比例不變的情況下有一邊占滿整個2寄狼。亦即裁剪區(qū)域的比例是在事先就設(shè)計好的，在這里是4：3盒发。
所以我在效果圖中將高填滿容器和寬填滿容器的圖片都演示了一遍例嘱。
一些處理
//續(xù)上面(1)
//高分屏下圖片模糊，需要2倍處理
t.getImage.height = 2 * t.imgHeight;
t.getImage.width = 2 * t.imgWidth;
t.getImage.style.width = t.imgWidth + 'px';
t.getImage.style.height = t.imgHeight + 'px';
let vertSquashRatio = t.detectVerticalSquash(img);
cxt.drawImage(img, 0, 0,2 * t.imgWidth * vertSquashRatio, 2 * t.imgHeight * vertSquashRatio)
t.cutImage();
t.drag();
第一個是高分屏下圖片模糊的問題宁舰，在高分屏下用canvas繪制某些圖片是會出現(xiàn)模糊，估計是和canvas的繪制機制有關(guān)奢浑，具體原因戳這里蛮艰。解決辦法也比較簡單，將canvas的css寬高固定雀彼，容器寬高擴大兩倍壤蚜。（我的理解即寡，css寬高就是canvas標(biāo)簽style樣式設(shè)置的寬高，容器寬高就是里面那個畫板的寬高袜刷，不是同一個東西）經(jīng)過這樣的處理后聪富，絕大多數(shù)圖片的模糊問題解決了。
第二個是圖片繪制壓縮問題著蟹，在低版本的ios機型下繪制1m多以上的圖片時會出現(xiàn)壓縮墩蔓，翻轉(zhuǎn)等問題，詳情及解決辦法戳這里萧豆。我上面就是用了一個stackflow里面的fix方法奸披。
從這兩個問題可以見到，canvas繪制還不是非常成熟涮雷，使用時要注意一些bug及相關(guān)修復(fù)辦法阵面。
移動時繪制
drag(){
let t = this;
let draging = false;
//記錄初始點擊的pageX，pageY洪鸭。用于記錄位移
let pageX = 0;
let pageY = 0;
//初始位移
let startX = 0;
let startY = 0;
t.editBox.addEventListener('touchmove', function(ev) {
let e = ev.touches[0];
let offsetX = e.pageX - pageX;
let offsetY = e.pageY - pageY;
if (draging) {
if (t.imgHeight == t.sHeight) {
t.sx = startX + offsetX;
if (t.sx <= 0) {
t.sx = 0;
} else if (t.sx >= t.imgWidth - t.sWidth) {
t.sx = t.imgWidth - t.sWidth;
}
} else {
t.sy = startY + offsetY;
if (t.sy <= 0) {
t.sy = 0;
} else if (t.sy >= t.imgHeight - t.sHeight) {
t.sy = t.imgHeight - t.sHeight;
}
}
t.cutImage();
}
});
t.editBox.addEventListener('touchstart', function(ev) {
let e = ev.touches[0];
draging = true;
pageX = e.pageX;
pageY = e.pageY;
startX = t.sx;
startY = t.sy;
})
t.editBox.addEventListener('touchend', function() {
draging = false;
})
這里邏輯不算太復(fù)雜样刷，先是記錄初始位置，然后判斷是左右移動還是上下移動（對應(yīng)高填滿容器和寬填滿容器）览爵，再根據(jù)pageX颂斜，pageY這些判斷位置量即可。
保存圖片
save(){
let t = this;
let saveCanvas = document.createElement('canvas');
let ctx = saveCanvas.getContext('2d');
//圖片裁剪后的尺寸
saveCanvas.width = 466;
saveCanvas.height = 350;
let images = new Image();
images.src = t.imgUrl;
images.onload = function(){
//計算裁剪尺寸比例拾枣，用于裁剪圖片
let cropWidthScale = images.width/t.imgWidth;
let cropHeightScale = images.height/t.imgHeight;
t.drawImageIOSFix(ctx, images,cropWidthScale * t.sx , cropHeightScale* t.sy,
t.sWidth * cropWidthScale, t.sHeight * cropHeightScale, 0, 0, 466, 350);
// ctx.drawImage(images,2 * t.sx, 2 * t.sy, t.sWidth * 2, t.sHeight * 2, 0, 0, 466, 350);
t.$vm.clipUrl = saveCanvas.toDataURL();
t.regional.removeChild(t.getImage);
t.regional.removeChild(t.editBox);
}
}
這部分也挺簡單的沃疮，裁剪框那里記錄了裁剪開始及結(jié)束的坐標(biāo)，然后新建一個canvas裁出來梅肤，并用toDataURL方法轉(zhuǎn)換為base64編碼司蔬，就可以傳輸?shù)胶笈_了。我這里裁剪后的尺寸是固定的姨蝴，這是業(yè)務(wù)需求俊啼，有需要的可以更改
總結(jié)
大致的流程就是這樣，感謝大家的閱讀左医，如有錯誤授帕，多多包涵。
