arn-vue-cropper

A simple Vue picture clipping plugin

Usage no npm install needed!

<script type="module">
  import arnVueCropper from 'https://cdn.skypack.dev/arn-vue-cropper';
</script>

README

thanks for the creator of this crop, I just added a crop event being done, while it does not implement itself.

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>