@neosjs/cropper

Vue图片裁剪器

安装

npm install @neosjs/cropper

使用

<script lang="ts" setup>
import NeosCropper from '@neosjs/cropper'

const cropper = ref(null)
const option = ref({
  img:'xxxxxxx', // 图片地址
  full: false,
  quality:1,
  fileExt: 'png', // 输出类型
  canMove: false, // 是否可以移动图片
  fixedSize: false, // 固定截图框大小
  original: false, // 是否显示原图按钮
  canMoveBox: true, // 截图框是否可以拖动
  autoCrop: false, // 是否自动截图
  // 只有自动截图开启 宽度高度才生效
  autoCropWidth: 200, // 自动截图宽度
  autoCropHeight: 150, // 自动截图高度
  centerBox: false, // 截图框是否被限制在图片里
  high: false, // 是否按高清
  cropData: {}, // 截图框的数据
  enlarge: 1, // 截图框的放大倍数
  mode: 'contain', // 截图框的模式
  maxImgSize: 3000, // 最大允许的图片大小
  limitMinSize: [50, 50], // 截图框的最小大小
  fixed: false, // 是否开启截图框宽高固定比例
  fixedNumber: [2, 1], // 截图框的宽高比例
  fillColor: '', // 截图框的背景颜色
  outlineColor: '#1c7ed6', // 截图框的线条颜色
  showGrid: true // 是否显示网格
})

const imgLoad = () => {
  console.log('图片加载完成')
}
const realTime = (data: any) => {
  previews.value = data
}
const startCrop = () => {
  crap.value = true
  cropper.value.startCrop()
}
const stopCrop = () => {
  crap.value = false
  cropper.value.stopCrop()
}
const clearCrop = () => {
  cropper.value.clearCrop()
}
</script>

<template>
  <div>
    <NeosCropper
      ref="cropper"
      v-bind="option"
      @real-time="realTime"
      @img-load="imgLoad"
      @img-load-error="imgLoad"
    />
    <section class="block">
      <p>截图预览</p>
      <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>
    </section>
  </div>
</template>

API

方法名	说明	参数
startCrop	开始截图	-
stopCrop	停止截图	-
clearCrop	清除截图	-
destroyCrop	销毁截图	-
rotateLeft	左旋转	-
rotateRight	右旋转	-
changeScale	缩放图片	Number
downloadImg	下载图片	-
getImgData	获取图片数据	-
getCropData	获取转换成base64 的图片信息	Function

事件

事件名	说明	返回值
on-error	图片加载失败	-
on-success	图片加载成功	-
real-time	截图框实时数据	Object
crop-moving	截图框移动中	-

参数

参数	说明	类型	可选值	默认值
img	图片地址	String, Blob, null, File	-	-
quality	输出图片质量	Number	-	1
fileExt	输出图片类型	String	-	jpeg
fileScale	输出图片的缩放比例	Boolean	-	false
canScale	是否开启滚轮放大缩小	Boolean	-	false
canMove	是否可以移动图片	Boolean	-	false
canMoveBox	截图框是否可以拖动	Boolean	-	true
autoCrop	是否自动截图	Boolean	-	false
autoCropWidth	自动截图宽度	Number、String	-	0
autoCropHeight	自动截图高度	Number、Number、String	-	0
fixedRatio	是否开启固定宽高比	Boolean	-	false
fixedNumber	固定宽高比例	Array	-	[1, 1]
fixedSize	是否固定截图框大小	Boolean	-	false
original	是否显示原图按钮	Boolean	-	false
centerBox	截图框是否被限制在图片里	Boolean	-	false
showInfo	是否显示截图框信息	Boolean	-	true
high	是否按高清	Boolean	-	true
maxImgSize	最大允许的图片大小	Number	-	2000
fillColor	导出时,填充背景颜色	String	-	-
cutDotColor	截图框的点的颜色	String	-	rgb(51 153 255 / 75%)
cutDotSize	截图框的点的大小	Number	-	6
cutDotRound	截图框的点是否圆角	Boolean	-	true
showGrid	是否显示网格	Boolean	-	true
gridColor	网格颜色	String	-	#eeeeee
showToolIcon	显示工具栏图标	Array	zoomIn、zoomOut、rotateLeft、rotateRight、redo、save	['close', 'confirm']
toolPosition	工具栏位置	String	left、center、right	right