前端vue3使用cropperjs截图插件

安装

npm install cropperjs@next

使用

<img ref="uploadImg" src="/cropperjs/v2/picture.jpg" alt="Picture">

// 引入
import Cropper from 'cropperjs';
// 样式
import 'cropperjs/dist/cropper.css'

// 定义
const cropper = ref({})
const uploadImg = ref()

// 截图插件配置
const cropperOption = ref({
  aspectRatio: 10 / 14, // 裁剪区默认正方形
  viewMode: 1, // 只能在裁剪的图片范围内移动
  dragMode: 'move', // 画布和图片都可以移动
  autoCropArea: 1, // 自动调整裁剪图片
  cropBoxMovable: true, // 禁止裁剪区移动
  cropBoxResizable: true, // 禁止裁剪区缩放
  background: true, // 关闭默认背景
})

// 初始化
const imgCropper = () => {
  cropper.value = new Cropper(uploadImg.value, cropperOption.value)
}

-
-