vue-cropper

一个优雅的图片裁剪插件

预览 english

vue-cropper 相关文章参考。

vue全家桶开发管理后台—裁切图片   作者： 麻球科技-菅双鹏

Vue-cropper 图片裁剪的基本原理 作者： 龙恩0707

vue-cropper 交流。

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

vue-cropper

安装 npm install vue-cropper

使用 import VueCropper from vue-cropper

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

如果你没有使用npm

在线例子

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

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

名称	功能	默认值	可选值
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

内置方法 通过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)  
})

更新日志

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>