@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 |