需要使用外層容器包裹並設置寬高
使用 注意： 需要關掉本地的mock服務， 不然圖片轉化會報錯
組件內使用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
main.js里面使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
cdn方式使用
<script src="//cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.js"></script>
Vue.use(window['vue-cropper'].default)
nuxt 使用方式
if(process.browser) {
vueCropper = require('vue-cropper')
Vue.use(vueCropper.default)
}
<vueCropper
ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" ></vueCropper>
vue-cropper
一個優雅的圖片裁剪插件
vue-cropper 相關文章參考。
shn_ui - vue-cropper 作者 野寧新之助
vue全家桶開發管理后台—裁切圖片 作者： 麻球科技-菅雙鵬
Vue-cropper 圖片裁剪的基本原理 作者： 龍恩0707
關於昵稱和頭像的總結（模仿微信） 作者： 秋晨光
vue-cropper 交流。
有什么意見,或者bug 或者想一起開發vue-cropper， 或者想一起開發其他插件
vue-cropper
安裝
npm install vue-cropper
yarn add vue-cropper
如果你沒有使用npm
服務器渲染 nuxt 解決方案 設置為ssr: false
module.exports = {
...
build: {
vendor: [
'vue-cropper
...
plugins: [
{ src: '~/plugins/vue-cropper', ssr: false }
]
}
}
目前還不知道什么原因項目里面開啟mock 會導致file報錯, 建議使用時 關掉mock
| 名稱 | 功能 | 默認值 | 可選值 |
| img | 裁剪圖片的地址 | 空 | url 地址 || base64 || blob |
| outputSize | 裁剪生成圖片的質量 | 1 | 0.1 - 1 |
| outputType | 裁剪生成圖片的格式 | jpg (jpg 需要傳入jpeg) | jpeg || png || webp |
| info | 裁剪框的大小信息 | true | true || false |
| canScale | 圖片是否允許滾輪縮放 | true | true || false |
| autoCrop | 是否默認生成截圖框 | false | true || false |
| autoCropWidth | 默認生成截圖框寬度 | 容器的80% | 0~max |
| autoCropHeight | 默認生成截圖框高度 | 容器的80% | 0~max |
| fixed | 是否開啟截圖框寬高固定比例 | true | true | false |
| fixedNumber | 截圖框的寬高比例 | [1, 1] | [寬度, 高度] |
| full | 是否輸出原圖比例的截圖 | false | true | false |
| fixedBox | 固定截圖框大小 不允許改變 | false | true | false |
| canMove | 上傳圖片是否可以移動 | true | true | false |
| canMoveBox | 截圖框能否拖動 | true | true | false |
| original | 上傳圖片按照原始比例渲染 | false | true | false |
| centerBox | 截圖框是否被限制在圖片里面 | false | true | false |
| high | 是否按照設備的dpr 輸出等比例圖片 | true | true | false |
| infoTrue | true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高 | false | true | false |
| maxImgSize | 限制圖片最大寬度和高度 | 2000 | 0-max |
| enlarge | 圖片根據截圖框輸出比例倍數 | 1 | 0-max(建議不要太大不然會卡死的呢) |
| mode | 圖片默認渲染方式 | contain | contain , cover, 100px, 100% auto |
內置方法 通過this.$refs.cropper 調用
this.$refs.cropper.startCrop() 開始截圖
this.$refs.cropper.stopCrop() 停止截圖
this.$refs.cropper.clearCrop() 清除截圖
this.$refs.cropper.changeScale() 修改圖片大小 正數為變大 負數變小
this.$refs.cropper.getImgAxis() 獲取圖片基於容器的坐標點
this.$refs.cropper.getCropAxis() 獲取截圖框基於容器的坐標點
this.$refs.cropper.goAutoCrop 自動生成截圖框函數
this.$refs.cropper.rotateRight() 向右邊旋轉90度
this.$refs.cropper.rotateLeft() 向左邊旋轉90度
圖片加載的回調 imgLoad 返回結果success, error
獲取截圖信息
this.$refs.cropper.cropW 截圖框寬度
this.$refs.cropper.cropH 截圖框高度
// 獲取截圖的base64 數據 this.$refs.cropper.getCropData((data) => { // do something console.log(data) }) // 獲取截圖的blob數據 this.$refs.cropper.getCropBlob((data) => { // do something console.log(data) }) ### Description of the default rendering mode of the image Image layout mode mode achieves the same effect as css background Contain Centered layout Default does not scale Ensure the image is inside the container mode: 'contain' Cover stretch layout fill the entire container mode: 'cover' If only one value is given, this value will be used as the width value and the height value will be set to auto. mode: '50px' If two values are given, the first one will be the width value and the second will be the height value. mode: '50px 60px' ### 預覽 ``` html @realTime="realTime" // Real time preview function realTime(data) { var previews = data; var h = 0.5; var w = 0.2; this.previewStyle1 = { width: previews.w + "px", height: previews.h + "px", overflow: "hidden", margin: "0", zoom: h }; this.previewStyle2 = { width: previews.w + "px", height: previews.h + "px", overflow: "hidden", margin: "0", zoom: w }; 固定為100寬度 this.previewStyle3 = { width: previews.w + "px", height: previews.h + "px", overflow: "hidden", margin: "0", zoom: 100 / preview.w }; 固定為100高度 this.previewStyle4 = { width: previews.w + "px", height: previews.h + "px", overflow: "hidden", margin: "0", zoom: 100 / preview.h }; this.previews = data; }, <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden', 'margin': '5px'}"> <div :style="previews.div"> <img :src="option.img" :style="previews.img"> </div> </div> <p>中等大小</p> <div :style="previewStyle1"> <div :style="previews.div"> <img :src="previews.url" :style="previews.img"> </div> </div> <p>迷你大小</p> <div :style="previewStyle2"> <div :style="previews.div"> <img :src="previews.url" :style="previews.img"> </div> </div> =
圖片移動回調函數 @imgMoving
data type
{
moving: true, // moving 是否在移動
axis: {
x1: 1, // 左上角
x2: 1，// 右上角
y1: 1，// 左下角
y2: 1 // 右下角
}
}
截圖框移動回調函數 @cropMoving
data type
{
moving: true, // moving 是否在移動
axis: {
x1: 1, // 左上角
x2: 1，// 右上角
y1: 1，// 左下角
y2: 1 // 右下角
}
}
更新日志
0.49
修復滾輪默認事件問題 修復html靜態文件引入事件觸發問題
0.48
修復mode 屬性 contain 和cover的顯示bug問題
修復ios 下面base64圖片跨域顯示問題
0.47
修復第一次不觸發預覽的問題 新增加圖片渲染mode功能
0.46
修復圖片旋轉bug 修復顯示的一些bug
0.45
添加倍數使用 enlarge 可以輸出裁剪框等比例圖片；
感謝來自於 的貢獻 添加預覽框各種比例, 和修復圖片截圖小數問題
0.44
修復引入方式的問題
組件內使用
import { VueCropper } from vue-cropper
components: {
VueCropper,
},
main.js里面使用
import VueCropper from vue-cropper
Vue.use(vueCropper)
cdn方式使用
<script src="vuecropper.js"></script>
Vue.use(window['vue-cropper'])
v0.43
剝離exif的依賴庫, 添加exfi-min.js減小代碼體積 45.9k => 37k build 升級webpack4 升級
添加vue install 方法 =》 npm: Vue.use(VueCropper) web: Vue.use(window['vue-cropper'])
v0.42
修復截圖框因為去除小數點的引起的問題
v0.41
修復截圖框邊界問題
v0.40
修復orientation的處理方式 感謝 Felipe Mengatto的貢獻
v0.39
修復orientation值不同帶來的問題 感謝 Felipe Mengatto的貢獻
v0.38
修改坐標反饋問題
v0.37
修復centerBox 的截圖超出1px問題
添加截圖 圖片移動觸發事件
v0.36
修復旋轉自動生成截圖框的錯誤
修改autocrop 可以動態生成截圖框
v0.35
修復其他圖片沒有壓縮的問題
v0.34
修改maxImgSize為2000
v0.33
maxImgSize 限制圖片最大寬度和高度 默認為2000px
v0.32
新增截圖框信息展示
infoTrue true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高
v0.30
新增獲取圖片坐標函數 this.$refs.cropper.getImgAxis()
新增獲取截圖框坐標函數 this.$refs.cropper.getCropAxis()
新增對高清設備的兼容 high
新增截圖框限制在圖片以內的功能 centerbox
新增自動生成截圖框函數 this.$refs.cropper.goAutoCrop
v0.29
新增圖片加載的回調 imgLoad 返回結果success, error
v0.28
修復截圖框固定 截圖框會影響原圖移動 縮放
v0.27
鼠標縮放問題優化 img max-width 樣式優化 新增屬性
canMove 是否可以移動圖片 默認為是 canMoveBox 是否可以移動截圖框 默認為是 original 是否按圖片原始比例渲染 默認為否
v0.26
修復火狐瀏覽器 鼠標縮放問題
v0.25
修復圖片有可能不展示
v0.24
修復ios拍照旋轉 截圖問題 添加自動修復圖片 截圖預覽代碼變更, 修改默認上傳圖片為blob預覽
realTime (data) {
this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden', 'margin': '5px'}"> <div :style="previews.div"> <img :src="previews.url" :style="previews.img"> </div> </div>
v0.23
小優化
v0.22
新增修改圖片大小函數 通過this.$refs.cropper.changeScale 調用
v0.21
新增固定截圖框大小fiexdBox(注： 最好搭配自動生成截圖框使用)
v0.20
新增輸出原圖比例截圖 props名full, 修復縮放圖片過大靈敏度問題
v0.19
新增圖片旋轉 修復mac滾輪過度靈敏
this.$refs.cropper.rotateRight() // 向右邊旋轉90度 this.$refs.cropper.rotateLeft() // 向左邊旋轉90度
v0.18
修復默認生成截圖框超過容器錯誤
v0.17
修復blob數據獲取錯誤
v0.15
添加手機端手勢縮放
canScale: true
v0.13
添加預覽
@realTime="realTime"
// Real time preview function
realTime (data) {
this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden', 'margin': '5px'}"> <div :style="previews.div"> <img :src="option.img" :style="previews.img"> </div> </div>
轉載：https://github.com/xyxiao001/vue-cropper/blob/master/english.md