cropperjs實踐及中文文檔(自譯)

来源:https://www.cnblogs.com/eightFlying/archive/2019/12/01/cropper-demo.html
-Advertisement-
Play Games

cropperjs是一款非常強大卻又簡單的圖片裁剪工具,它可以進行非常靈活的配置,支持手機端使用,支持包括IE9以上的現代瀏覽器。(關鍵是使用方法簡單,幾行代碼就可以搞定) ...


  cropperjs是一款非常強大卻又簡單的圖片裁剪工具,它可以進行非常靈活的配置,支持手機端使用,支持包括IE9以上的現代瀏覽器。(關鍵是使用方法簡單,幾行代碼就可以搞定)

實踐效果圖

  如圖,可以對指定的圖片進行裁剪,可以自己選擇裁剪的交互方式,如大小、縱橫比等 還可以預覽裁剪區域,確認裁剪後可以生成一個包含裁剪圖的canvas對象,藉助canvas的toDataURL方法可以生成一張Base64格式的圖片。還有另外一種不使用canvas的方式,利用該工具豐富的api可以拿到裁剪區域相對於原圖的各項數據,使用這些數據進行css絕對定位即可展示裁剪後的圖,該方式可以保證圖片不失真和完整。

實踐關鍵代碼

  用vue框架做了一個小demo,使用方法非常簡單,關鍵就是要瞭解這個工具豐富的能力,並且知道何時使用它。

<template>
  <div class="hello">
    <p>預覽</p>
    <div class="before"></div>
    <iy-button style="margin: 30px auto;" type="error" @click="sureSava">裁剪</iy-button>
    <div class="container">
      <div class="img-container">
        <img src="../assets/test.jpg" ref="image" alt=""> 
      </div>
      <div class="afterCropper">
        <img :src="afterImg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  name: 'HelloWorld',
  data () {
    return {
      myCropper: null,
      afterImg: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      this.myCropper = new Cropper(this.$refs.image, {
        viewMode: 1,
        dragMode: 'none',
        initialAspectRatio: 1,
        aspectRatio: 1,
        preview: '.before',
        background: false,
        autoCropArea: 0.6,
        zoomOnWheel: false,
      })
    },
    sureSava(){
      this.afterImg = this.myCropper.getCroppedCanvas({
        imageSmoothingQuality: 'high'
      }).toDataURL('image/jpeg')
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  display: flex;
}
.before{
  width: 100px;
  height: 100px;
  overflow: hidden;
  /* 這個屬性可以得到想要的效果 */
}
.img-container{
  height: 400px;
  overflow: hidden;
}
.afterCropper{
  flex: 1;
  margin-left: 20px;
  border: 1px solid salmon; 
  text-align: center;
}
.afterCropper img{
  width: 150px;
  margin-top: 30px;
}
</style>

自譯文檔

官方github文檔:https://github.com/fengyuanchen/cropperjs

官方文檔通俗易懂,我自己按照理解簡單的翻譯了一下,懶得翻譯的可以參考一下,可能有不准確的地方,請自行判斷,尤其是對容器(container)、圖片容器(canvas)、圖片(image)、裁剪區域(crop box)這幾個概念的區分,有幾個地方可能不對,先看這張圖理解下:

 

下麵是文檔

# cropper - 裁剪圖片 - IE9+

## 使用 cropperjs
```javascript
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
this.myCropper = new Cropper('被裁剪對象', '配置對象') //返回一個cropper對象

this.myCropper.getCroppedCanvas().toDataURL('image/jpeg') //拿到裁剪後的base64的圖片
this.myCropper.getCropBoxData();    //獲取裁剪框數據
this.myCropper.setCropBoxData();    //設置裁剪框數據
this.myCropper.getCanvasData();      //獲取圖片數據
this.myCropper.setCanvasData();      //設置圖片數據
```
## 配置對象
> https://github.com/fengyuanchen/cropperjs
__註意:第一個值為預設值__

- viewMode 視圖控制
    - 0 無限制
    - 1 限製裁剪框不能超出圖片的範圍
    - 2 限製裁剪框不能超出圖片的範圍 且圖片填充模式為 cover 最長邊填充
    - 3 限製裁剪框不能超出圖片的範圍 且圖片填充模式為 contain 最短邊填充
- dragMode 拖拽圖片模式
    - crop 形成新的裁剪框
    - move 圖片可移動
    - none 什麼也沒有
- initialAspectRatio 裁剪框寬高比的初始值 預設與圖片寬高比相同 只有在aspectRatio沒有設置的情況下可用
- aspectRatio 設置裁剪框為固定的寬高比
- data 之前存儲的裁剪後的數據 在初始化時會自動設置 只有在autoCrop設置為true時可用
- preview 預覽 設置一個區域容器預覽裁剪後的結果
    - Element, Array (elements), NodeList or String (selector)
- responsive 在視窗尺寸調整後 進行響應式的重渲染 預設true
- restore 在視窗尺寸調整後 恢復被裁剪的區域 預設true
- checkCrossOrigin 檢查圖片是否跨域 預設true 如果是 會在被覆制的圖片元素上加上屬性crossOrigin 並且在src上加上一個時間戳 避免重載入圖片時因為瀏覽器緩存而載入錯誤
- checkOrientation 檢查圖片的方向信息(僅JPEG圖片有)預設true 在旋轉圖片時會對圖片方向值做一些處理 以解決IOS設備上的一些問題
- modal 是否顯示圖片和裁剪框之間的黑色蒙版 預設true
- guides 是否顯示裁剪框的虛線 預設true
- center 是否顯示裁剪框中間的 ‘+’ 指示器 預設true
- highlight 是否顯示裁剪框上面的白色蒙版 (很淡)預設true
- background 是否在容器內顯示網格狀的背景 預設true
- autoCrop 允許初始化時自動的裁剪圖片 配合 data 使用 預設true
- autoCropArea 設置裁剪區域占圖片的大小 值為 0-1 預設 0.8 表示 80%的區域
- movable 是否可以移動圖片 預設true
- rotatable 是否可以旋轉圖片 預設true
- scalable 是否可以縮放圖片(可以改變長寬) 預設true
- zoomable 是否可以縮放圖片(改變焦距) 預設true
- zoomOnTouch 是否可以通過拖拽觸摸縮放圖片 預設true
- zoomOnWheel 是否可以通過滑鼠滾輪縮放圖片 預設true
- wheelZoomRatio 設置滑鼠滾輪縮放的靈敏度 預設 0.1
- cropBoxMovable 是否可以拖拽裁剪框 預設true
- cropBoxResizable 是否可以改變裁剪框的尺寸 預設true
- toggleDragModeOnDblclick 是否可以通過雙擊切換拖拽圖片模式(move和crop)預設true 當拖拽圖片模式為none時不可切換 該設置必須瀏覽器支持雙擊事件
- minContainerWidth(200)、minContainerHeight(100)、minCanvasWidth(0)、minCanvasHeight(0)、minCropBoxWidth(0)、minCropBoxHeight(0) 容器、圖片、裁剪框的 最小寬高 括弧內為預設值 註意 裁剪框的最小高寬是相對與頁面而言的 並非相對圖片


## 方法
__註意:如果方法沒有被設置返回任何值,那麼它會返回一個cropper的實例 因此多個方法可以使用鏈式寫法__

- crop() 手動顯示裁剪框
- reset() 重置圖片和裁剪框為初始狀態
- replace(url[, hasSameSize]) 替換圖片路徑並且重建裁剪框 
    - url 新路徑
    - hasSameSize 預設值false 設置為true表示新老圖片尺寸一樣 只需要更換路徑無需重建裁剪框
- enable() 解凍 裁剪框
- disable() 凍結 裁剪框
- destroy() 摧毀裁剪框並且移除cropper實例
- move(offsetX[, offsetY]) 移動圖片指定距離 一個參數代表橫縱向移動距離一樣
- moveTo(x[, y]) 移動圖片到一個指定的點 一個參數代表橫縱向移動距離一樣
- zoom(ratio) 縮放 ratio大於零是放大 小於零縮小
- zoomTo(ratio[, pivot]) 縮放並設置中心點的位置
- rotate(degree) 旋轉 類似css
- rotateTo(degree) 旋轉到絕對角度
- scale(scaleX[, scaleY])、scaleX(scaleX)、scaleY(scaleY) 縮放 一個參數代表橫縱向縮放值一樣
- getData([rounded]) 返回裁剪區域基於原圖片!原尺寸!的位置和尺寸 rounded預設為false 表示是否顯示四捨五入後的數據 有了這些數據可以直接在原圖上進行裁剪顯示
- setData(data) 改變裁剪區域基於原圖的位置和尺寸 僅當viewMode 不為0時有效
- getContainerData()、getImageData()、getCanvasData()、setCanvasData(data)、getCropBoxData()、setCropBoxData(data) 容器、圖片容器(畫布)、圖片、裁剪區域相對容器的數據設置和獲取
- getCroppedCanvas([options]) 得到被裁剪圖片的一個canvas對象 options設置這個canvas的一些數據
    - width、height、minWidth、minHeight、maxWidth、maxHeight、fillColor、imageSmoothingEnabled(圖片是否是光滑的 預設true)、imageSmoothingQuality(圖片的質量 預設low 還有medium、high)
- setAspectRatio(aspectRatio) 改變裁剪區域的寬高比
- setDragMode([mode]) 設置拖拽圖片模式

## 事件
- ready 渲染前(圖片已經被載入、cropper實例已經準備完畢)的準備工作事件 
- cropstart、cropmove、cropend、crop 開始畫裁剪框(或畫布)、畫裁剪框(或畫布)的中途、裁剪框(或畫布)畫完、進行裁剪事件 event.detail.originalEvent、event.detail.action
    - 當autoCrop為true crop事件會在ready之前觸發
- zoom 裁剪框縮放事件

參考資料

官方github地址:https://github.com/fengyuanchen/cropperjs

demo地址:https://gitee.com/eightFlying/cropper-demo.git


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如圖,這個是看視頻時,最後的作業,除了客戶端未使用select實現外,其它的要求都有簡單實現。 服務端代碼如下: 客戶端代碼還是之前的版本,沒有使用select實現: ...
  • 最近,在Medium上出現了一個採訪問題:如何向奶奶解釋SQL和NoSQL之間的區別。我認為作者使用自己的結構化家譜來比較sql和nosql之間的差異。寫作非常好,但是有點尷尬。面試官沒有時間聽你的話。我個人認為sql和nosql之間的區別消失了。一兩個句子無法概括,更不用說告訴奶奶了,因此,如果您 ...
  • 資料庫 1、創建資料庫 2、查看資料庫 3、刪除資料庫 表 1、創建表 2、刪除表 3、重命名錶 列 1、添加列 2、刪除列 3、重命名列 約束 1、主鍵 視圖 1、創建視圖 2、刪除視圖 存儲過程 1、創建存儲過程 2、刪除存儲過程 3、執行存儲過程 4、重命名存儲過程 5、帶有輸出參數的存儲過程 ...
  • 存儲過程(特定功能的SQL語句集) 一組為了完成特定功能的SQL語句集,存儲在資料庫中,經過第一次編譯後再次調用不需要編譯,用戶通過指定存儲過程的名字並給出參數(如果該存儲過程帶有參數)來執行它。存儲過程是資料庫中一個重要對象。 1.創建存儲過程: create procedure 存儲過程名稱 ( ...
  • --創建資料庫使用預設的方式 create database 資料庫名稱 --創建一個完整的資料庫,帶有主文件和日誌文件 create database 資料庫名稱 --邏輯名稱 on primary( name='資料庫名稱', --物理名稱 filename='d:\名字.mdf', size= ...
  • SELECT和SET在SQL SERVER中都可以用來對變數進行賦值,但其用法和效果在一些細節上有些不同。 1. 在對變數賦值方面,SET是ANSI標準的賦值方式,SELECT則不是。這也是SET方式被推薦使用的原因之一。 2. SELECT可以一次對多個變數進行賦值,而SET一次只能對一個變數賦值 ...
  • UIGestureRecognizerDelegate A set of methods implemented by the delegate of a gesture recognizer to fine-tune an app’s gesture-recognition behavior. 一 ...
  • 浮動基本介紹 在標準文檔流中元素分為2種, 和`行內元素`,如果想讓一些元素既要有塊級元素的特點也同時保留行內元素特點,只能讓這些元素脫離標準文檔流即可。 浮動可以讓元素脫離標準文檔流,可以實現讓多個元素排在同一行,並且可以設置寬高度。 其實浮動是通過 屬性來實現的。 屬性值說明表: 屬性值 |描述 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...