npm package: @neosjs/cropper
Description: Vue图片裁剪器
Author: 听着情歌流泪
Latest version: 1.0.2

# @neosjs/cropper

Vue图片裁剪器

## 安装

```bash
npm install @neosjs/cropper
```

## 使用

```vue
<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 |