module.exports = {
  ...
  build: {
    vendor: [
      'vue-cropper
    ...
    plugins: [
      { src: '~/plugins/vue-cropper', ssr: false }
    ]
  }
}

2. 引入 Vue Cropper

Vue 3 组件内引入

npm install vue-cropper@next
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";

Vue3 全局引入

import VueCropper from 'vue-cropper'; 
import 'vue-cropper/dist/index.css'

const app = createApp(App)
app.use(VueCropper)
app.mount('#app')

Vue3 CDN 方式引入

<style type="text/css" src="https://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/index.css"></style>

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/vue-cropper.umd.js"></script>
const app = Vue.createApp({...});
app.component('vue-cropper', window['vue-cropper'].VueCropper);

Vue2 组件内引入

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}

Vue2 全局引入

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

Vue2 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)
}

3. 代码中使用

重要！ 需要关掉本地的 mock 服务，不然图片转化会报错 重要！ 需要使用外层容器包裹并设置宽高

<vueCropper
  ref="cropper"
  :img="option.img"
  :outputSize="option.size"
  :outputType="option.outputType"
></vueCropper>

二、文档

1. props

目前还不知道什么原因项目里面开启 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	是否开启截图框宽高固定比例	`false`	`true`, `false`
fixedNumber	截图框的宽高比例, 开启`fixed`生效	`[1, 1]`	`[ 宽度 , 高度 ]`
full	是否输出原图比例的截图	`false`	`true`, `false`
fixedBox	固定截图框大小	不允许改变	`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
limitMinSize	裁剪框限制最小区域	10	Number, Array, String
fillColor	导出时背景颜色填充	空	`#ffffff`, `white`

2. 可用回调方法

@realTime 实时预览事件
@imgMoving 图片移动回调函数
@cropMoving 截图框移动回调函数
@imgLoad 图片加载的回调, 返回结果 success, error

@realTime 实时预览事件

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 图片移动回调函数

返回的参数内容

{
   moving: true, // moving 是否在移动
   axis: {
     x1: 1, // 左上角
     x2: 1，// 右上角
     y1: 1，// 左下角
     y2: 1 // 右下角
   }
 }

@cropMoving 截图框移动回调函数

返回的参数内容

{
   moving: true, // moving 是否在移动
   axis: {
     x1: 1, // 左上角
     x2: 1，// 右上角
     y1: 1，// 左下角
     y2: 1 // 右下角
   }
 }

2. 内置方法和属性

通过 this.$refs.cropper 调用

属性

属性	说明
this.$refs.cropper.cropW	截图框宽度
this.$refs.cropper.cropH	截图框高度

方法

方法	说明
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度

获取截图内容

获取截图的 base64 数据

this.$refs.cropper.getCropData(data => {
  // do something
  console.log(data)  
})

获取截图的 blob 数据

this.$refs.cropper.getCropBlob(data => {
  // do something
  console.log(data)  
})

三、相关文章参考

四、交流

有什么意见，或者 bug，或者想一起开发 vue-cropper，或者想一起开发其他插件

changelog

更新日志

vue3.x组件更新日志

v1.1.3

修复长图缩放问题
修复full场景 fillColor不生效问题
修复build any type类型问题

v1.1.2

centerBox 缩放贴边问题修复 with LAQKing

v1.1.1

修复部分 base64 图片长度导致展示问题

v1.1.0

修复 exif 读取图片出错的情况
新增 @imgLoadError方法返回对应错误
v1.0.9
新增 fillCover, 导出图片背景颜色
v1.0.8
更新特定情况固定比例问题
v1.0.7
移除 node 版本和 npm 要求

v1.0.6

添加最小截图框限制
修复 ts 类型问题
编译替换为 vite4.x
v1.0.5
vue3版本生命周期修复 unmounted
v1.0.4
升级最新版本 vue 依赖和 vite 版本问题，解决 ts 类型引入问题
v1.0.3
升级最新版本 vue 依赖和 vite 版本问题
v1.0.2
提供 ts .d.ts 类型声明文件
修复 vue3 全局使用问题
v1.0.1
修复固定角度的部分问题
v1.0.1
修复依赖问题

v1.0.0

支持 vue3 版本

vue2.x组件更新日志

v0.6.5

修复长图缩放问题
修复full场景 fillColor不生效问题
修复build any type类型问题

v0.6.4

修复部分 base64 图片长度导致展示问题

v0.6.3

修复 exif 读取图片出错的情况
新增 @imgLoadError方法返回对应错误
v0.6.2
新增 fillCover, 导出图片背景颜色
v0.6.1
修复部分问题
v0.6.0
移除 node 版本和 npm 要求
v0.59
添加最小截图框限制
v0.58
更新 sass依赖
v0.57
更新文档
v0.56
修复绑定事件判断出错的问题
修复组件移除没有解绑滚动事件的问题

v0.55

修复 ios 版本小于 13.4没有处理图片旋转的 bug

v0.54

去除 log 信息
修复 pc safari低版本问题

v0.53

因为 chrome81 内核版本和 ios13.5 版本修复了图片旋转的 bug
插件在新版浏览器默认不处理旋转了，低版本浏览器自动处理
https://www.chromestatus.com/feature/6313474512650240

v0.52

撤回最小弹框属性, 存在弹框拖拽坐标判断的 bug

v0.51

更新裁剪框最小属性，限制最小区域，可传1以上的数字和字符串，限制长宽都是这么大也可以传数组 [90,90]
limitMinSize: [Number, Array, String]

v0.50

支持图片清空
修复 ie11 ie10 不能使用问题
修复 URL.createObjectURL 创建后没有销毁的 bug

添加截图框修改触发事件

  this.$emit('change-crop-size', {
    width: this.cropW,
    height: this.cropH
  })

v0.49

修复滚轮默认事件问题
修复html静态文件引入事件触发问题

v0.48

修复mode 属性 contain 和cover的显示bug问题
修复ios 下面base64图片跨域显示问题

v0.47

修复第一次不触发预览的问题
新增加图片渲染 mode 功能

v0.46

修复图片旋转 bug
修复显示的一些 bug

v0.45

添加倍数使用 enlarge
可以输出裁剪框等比例图片
感谢来自于 hzsrc 的贡献
添加预览框各种比例, 和修复图片截图小数问题

v0.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>

Package detail

readme

vue-cropper

一、安装使用

1. 安装