在vue3中vue-cropper的初使用

一、前言

在学习 Vue-Cropper 之前 先了解一下 Cropper，两者的关系与区别，避免在学习的时候踩坑和把它们搞混淆。

Cropper 是一个基于JavaScript 的图像剪切库，它可以在多种现代浏览器中运行工作。它提供了丰富的配置选项和事件，使得用户可以轻松地图像上传、剪切、旋转、缩放等功能。Cropper的设计目标是提供简单、灵活和强大的图像处理功能。

Cropper 的主要特性：

1、支持多种图片格式，如JPEG、PNG、GIF等。

2、提供多种剪切形状。

3、支持图片旋转。

4、支持多种语言和主体。

5、提供丰富的API和事件，便于自定义和集成。

6、Cropper 不依赖与 Vue.js环境，可以在其它环境中使用。

Vue-Cropper 是一个基于 Vue.js 的图像剪切组件，它是专门为 Vue.js应用程序设计的。Vue-Cropper  封装了 Cropper 库的许多功能，使其更易于在 Vue.js 项目中集成和使用。

Vue-Cropper 的主要特性：

1、简单易用：可以直接作为 vue 组件使用。

2、支持与 vue 的响应式数据绑定。

3、支持多种图像格式和剪切形状。

4、支持图像选装、缩放和翻转。

5、提供了一些 额外的功能，如图片预览、图片上传等。

6、只能在 vue.js 的环境中使用。

二、安装与使用

1、安装

# npm 安装
npm install vue-cropper@next -d --save

# yarn 安装
yarn add vue-cropper@next

2、引入

在组件中引入

import 'vue-cropper/dist/index.css';

import { VueCropper } from 'vue-cropper';

全局引入

在 main.js中

import VueCropper from 'vue-cropper'; 
import 'vue-cropper/dist/index.css'

const app = createApp(App)
app.use(VueCropper)
app.mount('#app')

3、代码使用

重要： 需要关掉本地的 mock 服务， 不然图片转化会报错。

重要： 需要使用外层容器包裹并设置宽高。

<div style="width: 300px; height: 300px;">        

        <vueCropper

          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"

        >

        </vueCropper>

</div>

三、文档

1、props 属性

名称	功能	默认值	可选值
img	裁剪图片的地址	空	url 地址, base64, blob
outputSize	裁剪生成图片的质量	1	0.1 ~ 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg, png, webp
info	裁剪框的大小信息	true	true, false
canScale	图片是否允许滚轮缩放	true	true, false
autoCrop	是否默认生成截图框	false	true, false
autoCropWidth	默认生成截图框宽度	容器的 80%	0 ~ max
autoCropHeight	默认生成截图框高度	容器的 80%	0 ~ max
fixed	是否开启截图框宽高固定比例	false	true, false
fixedNumber	截图框的宽高比例, 开启fixed生效	[1, 1]	[ 宽度 , 高度 ]
full	是否输出原图比例的截图	false	true, <