【開源】canvas圖像裁剪、壓縮、旋轉

前言

前段時間遇到了一個移動端對圖像進行裁剪、壓縮、旋轉的需求。
考慮到已有各輪子的契合度都不高，因而本身從新造了一個輪子。css

關於圖像裁剪、壓縮

在HTML5時代，canvas的功能已經很是強大了，能夠進行像素級的操做。像圖像裁剪、壓縮就都是基於canvas來實現的。html

關於其中原理，無非就是利用canvas自帶的API，複雜一點的就是裁剪框以及旋轉後的座標計算，所以再也不贅述。ios

本文中的圖像裁剪、壓縮都是基於canvas完成的。git

圖像裁剪

功能包括：github

canvas繪製圖片算法
裁剪框選擇裁剪大小canvas
旋轉功能markdown
放大鏡（方便旋轉）iphone
裁剪功能oop
縮放、壓縮功能（經過參數控制）

示例

dailc.github.io/image-proce…

效果

[圖片上傳失敗...(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();複製代碼

關於詳細參數說明與更多使用

請參考源碼

圖像縮放

上述的圖片裁剪中其實已經附帶縮放功能，可是鑑於那是基於整套裁剪流程的，不知足一些場景（譬如只要針對圖片壓縮的）。

所以，單獨又將圖像縮放提取成一個模塊，以適用於此類場景。

功能包括：

圖像的縮放、壓縮
一些經常使用的縮放算法（雙立方，雙線性，近鄰）

示例

dailc.github.io/image-proce…

效果

示例較爲粗糙

使用

引入

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,
});複製代碼

關於詳細參數說明與更多使用

請參考源碼

完善與不足

雖說一些注意的功能都已經實現，可是從細節角度考慮，仍是有不少有待完善的地方的。

譬如，裁剪框的實現方式不優雅。

譬如，旋轉不支持其它角度。

譬如，內部源碼有待優化。

...

雖說有計劃將來某段時間重構，但考慮到實際的時間安排，可能得等到很後了。

源碼

圖像裁剪：

github.com/dailc/image…

圖像縮放：

github.com/dailc/image…