前言
前段時間遇到了一個移動端對影象進行裁剪、壓縮、旋轉的需求。
考慮到已有各輪子的契合度都不高，於是自己重新造了一個輪子。
關於影象裁剪、壓縮
在HTML5時代，canvas的功能已經非常強大了，可以進行畫素級的操作。像影象裁剪、壓縮就都是基於canvas來實現的。
關於其中原理，無非就是利用canvas自帶的API，複雜一點的就是裁剪框以及旋轉後的座標計算，因此不再贅述。
本文中的影象裁剪、壓縮都是基於canvas完成的。
影象裁剪
功能包括：
canvas繪製圖片裁剪框選擇裁剪大小
旋轉功能
放大鏡（方便旋轉）
裁剪功能
縮放、壓縮功能（通過引數控制）
示例
效果
[圖片上傳失敗...(image-c687d7-1510800462845)]
使用
引入
dist/image-clip.css
dist/image-clip.js複製程式碼全域性變數
ImageClip複製程式碼呼叫方法
var cropImage = new ImageClip(options);
cropImage.method()複製程式碼API
resetClipRect
重置裁剪框，重新變為最大
cropImage.resetClipRect();複製程式碼clip
裁剪影象，根據當前的裁剪框進行裁剪
cropImage.clip();複製程式碼getClipImgData
獲取已裁剪的影象
var base64 = cropImage.getClipImgData();複製程式碼rotate
旋轉圖片
cropImage.clip(isClockWise);複製程式碼destroy
銷燬當前的裁剪物件
如果一個容器需要重新生成裁剪物件，一定要先銷燬以前的
cropImage.destroy();複製程式碼更多
關於詳細引數說明與更多使用
請參考原始碼
影象縮放
上述的圖片裁剪中其實已經附帶縮放功能，但是鑑於那是基於整套裁剪流程的，不滿足一些場景（譬如只要針對圖片壓縮的）。
因此，單獨又將影象縮放提取成一個模組，以適用於此類場景。
功能包括：
影象的縮放、壓縮
一些常用的縮放演算法（雙立方，雙線性，近鄰）
示例
效果
示例較為粗糙
使用
引入
dist/image-scale.js複製程式碼全域性變數
ImageScale複製程式碼呼叫方法
ImageScale.method()複製程式碼API
scaleImageData
對ImageData型別的資料進行縮放，將資料放入新的ImageData中
ImageScale.scaleImageData(imageData, newImageData, {
// 0: nearestNeighbor
// 1: bilinearInterpolation
// 2: bicubicInterpolation
// 3: bicubicInterpolation2
processType: 0,
});複製程式碼scaleImage
對Image型別的物件進行縮放，返回一個base64字串
var base64 = ImageScale.scaleImage(image, {
width: 80,
height: 80,
mime: 'image/png',
// 0: nearestNeighbor
// 1: bilinearInterpolation
// 2: bicubicInterpolation
// 3: bicubicInterpolation2
processType: 0,
});複製程式碼compressImage
compressImage，返回一個base64字串
與scale的區別是這用的是canvas自動縮放，並且有很多引數可控
var base64 = ImageScale.compressImage(image, {
// 壓縮質量
quality: 0.92,
mime: 'image/jpeg',
// 壓縮時的放大係數，預設為1，如果增大，代表影象的尺寸會變大(最大不會超過原圖)
compressScaleRatio: 1,
// ios的iPhone下主動放大一定係數以解決解析度過小的模糊問題
iphoneFixedRatio: 2,
// 是否採用原影象素（不會改變大小）
isUseOriginSize: false,
// 增加最大寬度，增加後最大不會超過這個寬度
maxWidth: 0,
// 使用強制的寬度，如果使用，其它寬高比係數都會失效，預設整圖使用這個寬度
forceWidth: 0,
// 同上，但是一般不建議設定，因為很可能會改變寬高比導致拉昇，特殊場景下使用
forceHeight: 0,
});複製程式碼更多
關於詳細引數說明與更多使用
請參考原始碼
完善與不足
雖然說一些注意的功能都已經實現，但是從細節角度考慮，還是有很多有待完善的地方的。
譬如，裁剪框的實現方式不優雅。
譬如，旋轉不支援其它角度。
譬如，內部原始碼有待優化。
...
雖然說有計劃未來某段時間重構，但考慮到實際的時間安排，可能得等到很後了。
原始碼
影象裁剪：
影象縮放：