# vue3-cropper

**Repository Path**: firechildren/vue3-cropper

## Basic Information

- **Project Name**: vue3-cropper
- **Description**: 用vue3开发的头像裁剪组件
工程采用rollup + typescript 编译而成
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2023-01-19
- **Last Updated**: 2024-10-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue3, 图片裁剪

## README

## 基于vue3开发，图片裁剪组件，使用rollup + TypeScript工程化

如若想用vue2版本 请前往[vue2-cropper](https://gitee.com/firechildren/vue2-cropper)

- 支持图片伸缩放大缩小
- 支持控制裁剪区域的大小
- 支持裁剪区域移动
- 不支持图片旋转
- 默认生成png格式文件

## 兼容（没有具体测浏览器版本，总之...）
| 谷歌 | safari | ie |
|-----|--------|----|
| ✔   |   ✔   | ❌ |   

## 参数说明
| 参数名          | 说明                                   | 默认值              |
|----------------|---------------------------------------|--------------------|
| originImage    | 原图地址，建议不要放http，支持base64和blob |  空字符串           |
| showResolution | 是否展示分辨率小标签                      |  true             |
| enableCut      | 能否改变切图区域尺寸                      |  true             |
| defaultCutWidth| 可编辑切图区域的宽度                      |  原图宽度/4            |
| defaultCutHeight| 可编辑切图区域的高度                     |  原图高度/4             |

## 回调事件说明
| 函数名  | 说明           | 参数          |
|--------|---------------|---------------|
| getImg | 获得裁剪后的图片 | String base64|

## 截图
![输入图片说明](https://gitee.com/firechildren/vue2-cropper/raw/master/src/assets/%E6%88%AA%E5%9B%BE.png)


## 安装
```
npm install v3-cropper
```

## 使用示例

```

<script setup lang="ts">
    import { ref } from "vue";
    import Cropper from "v3-cropper";
    import dogImage from "@/assets/whiteDog.jpg";
    //  推荐使用blob或base64类型的图片
    const defaultImg = ref(dogImage)

    const cutImg = ref(dogImage);

    const getImg = (base64: string) => {
        cutImg.value = base64
    }
</script>

<template>
   <div style="width: 600px;height: 400px">
            <Cropper :origin-image="defaultImg" @getImg="getImg"></Cropper>
   </div>
   <img :src="cutImg" />
</template>

```