@neosjs/cropper

Vue图片裁剪器

安装

npm install @neosjs/cropper

使用

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

const cropper = ref(null)
const option = ref({
  img:'xxxxxxx', // 图片地址
  size: 1, 
  full: false,
  outputType: 'png', // 输出类型
  canMove: false, // 是否可以移动图片
  fixedBox: 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>
    <Cropper
      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 class="block">
      <button @click="startCrop" v-if="!crap" class="btn">开始截图</button>
      <button @click="stopCrop" v-else class="btn">停止截图</button>
      <button @click="clearCrop" class="btn">重做</button>
      <button @click="refreshCrop" class="btn">刷新</button>
      <button @click="changeScale(1)" class="btn">放大</button>
      <button @click="changeScale(-1)" class="btn">缩小</button>
      <button @click="rotateLeft" class="btn">左旋转</button>
      <button @click="rotateRight" class="btn">右旋转</button>
      <button @click="finish('base64')" class="btn">预览</button>
      <a @click="down('base64')" class="btn">下载</a>
      <a :href="downImg" download="demo.png" ref="downloadDom"></a>
    </div>
  </div>