很多時候,我們都需要對圖片進行裁剪、縮放、旋轉等操作,比如:上傳用戶的LOGO,基本都需要裁剪功能的。那麼一個好用的裁剪插件,勢必會提高用戶的體驗度。
我們先來看一個裁剪圖片,可能的效果和必須的功能,如下圖:

從此圖上,我們看出,四角可以拖拽縮放來裁剪,同時生產多張不同尺寸的小圖,下邊的功能按鈕,還可以旋轉圖片、縮放、預覽等。
上圖如何實現呢?今天,推薦給您一款jQuery插件:Cropper.js。
那麼什麼是Cropper.js呢?
它是一個簡單的jQuery圖片裁剪插件。同樣的,我們推薦用不依賴jQuery的Cropper.js庫。
那麼它有哪些特點呢?
支持jQuery1.9.1+的依賴、支持無jQuery的裁剪庫;
支持38個配置選項、支持27個方法、支持6個事件;
支持移動端、支持縮放 旋轉 等比縮放、支持多個裁剪;
支持在Canvas上裁剪、支持讀取圖片Exif信息、支持跨瀏覽器裁剪等。
那麼如何獲取它呢?
你可以到github上搜索:Cropper,它有2個版本,一個是依賴jQuery的,一個是不依賴jQuery的(Cropper.js)。推薦用不依賴的js庫。
那麼如何使用它呢?

通過上圖,我們可以很快的用起來,至於配置信息,你可以到github上查閱。這裡不一一列舉了。
對於用戶使用時,都有哪些常見問題?
比如:通過shift鍵來等比例裁剪圖片;通過雙擊鼠標進入裁剪模式、移動模式等。

看着是不是很心動,有空就用一下吧,說不定哪天領導就讓弄個這樣的功能。不至於讓我們手足無措。
原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/224594.html