vue-cropper

一个优雅的图片裁剪插件

[ 查看演示 Demo ]
[ README_english ]
[ 更新日志 ]

一、安装使用

1. 安装

# npm 安装
npm install vue-cropper

# yarn 安装
yarn add vue-cropper

如果你没有使用 npm

在线例子vue-cropper + vue.2x

在线例子vue-cropper@next + vue.3x

服务器渲染 nuxt 解决方案设置为 ssr: false

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/[email protected]/dist/index.css"></style>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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	截图框的宽高比例	`[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，或者想一起开发其他插件

xyxiao001/vue-cropper

xyxiao001

Reviews

Repository Details

vue-cropper

一、安装使用

1. 安装

2. 引入 Vue Cropper

3. 代码中使用

二、文档

1. props

2. 可用回调方法

@realTime 实时预览事件

@imgMoving 图片移动回调函数

@cropMoving 截图框移动回调函数

2. 内置方法和属性

三、相关文章参考

四、交流

More Repositories

xyxiao001/vue-cropper

xyxiao001

Reviews

Repository Details

vue-cropper

一、安装使用

1. 安装

2. 引入 Vue Cropper

3. 代码中使用

二、文档

1. props

2. 可用回调方法

@realTime 实时预览事件

@imgMoving 图片移动回调函数

@cropMoving 截图框移动回调函数

2. 内置方法 和 属性

三、相关文章参考

四、交流

More Repositories

2. 内置方法和属性