轉載於：http://www.cnblogs.com/dailc/p/7843204.html
前言
前段時間遇到了一個移動端對圖像進行裁剪、壓縮、旋轉的需求。
考慮到已有各輪子的契合度都不高，於是自己重新造了一個輪子。
關於圖像裁剪、壓縮
在HTML5時代，canvas的功能已經非常強大了，可以進行像素級的操作。像圖像裁剪、壓縮就都是基於canvas來實現的。
關於其中原理，無非就是利用canvas自帶的API，復雜一點的就是裁剪框以及旋轉后的坐標計算，因此不再贅述。
本文中的圖像裁剪、壓縮都是基於canvas完成的。
圖像裁剪
功能包括：
-
canvas繪制圖片 -
裁剪框選擇裁剪大小
-
旋轉功能
-
放大鏡（方便旋轉）
-
裁剪功能
-
縮放、壓縮功能（通過參數控制）
示例
https://dailc.github.io/image-process/examples/clip.html
效果
使用
引入
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();更多
關於詳細參數說明與更多使用
請參考源碼
圖像縮放
上述的圖片裁剪中其實已經附帶縮放功能，但是鑒於那是基於整套裁剪流程的，不滿足一些場景（譬如只要針對圖片壓縮的）。
因此，單獨又將圖像縮放提取成一個模塊，以適用於此類場景。
功能包括：
-
圖像的縮放、壓縮
-
一些常用的縮放算法（雙立方，雙線性，近鄰）
示例
https://dailc.github.io/image-process/examples/scale.html
https://dailc.github.io/image-process/examples/scale_compress.html
效果
示例較為粗糙
使用
引入
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, });更多
關於詳細參數說明與更多使用
請參考源碼
完善與不足
雖然說一些注意的功能都已經實現，但是從細節角度考慮，還是有很多有待完善的地方的。
譬如，裁剪框的實現方式不優雅。
譬如，旋轉不支持其它角度。
譬如，內部源碼有待優化。
...
雖然說有計划未來某段時間重構，但考慮到實際的時間安排，可能得等到很后了。
源碼
圖像裁剪：
https://github.com/dailc/image-process/blob/master/src/clip/README.md
圖像縮放：
https://github.com/dailc/image-process/blob/master/src/scale/README.md