canvas圖像裁剪、壓縮、旋轉


轉載於: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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM