Cropper 图片裁剪

代码演示

基础用法

<template>
    <x-cropper
        ref="cropperRef"
        :src="assets('avatar.jpg')"
        @change="onChange"></x-cropper>
</template>

<script setup>
import { assets } from '@/utils'
import { ref } from 'vue'

const cropperRef = ref()

function onChange(info) {
    console.log(info)
}
</script>

<style lang="less" scoped></style>

比例

<template>
    <x-cropper
        ref="cropperRef"
        :aspect-ratio="1 / 1"
        :src="assets('avatar.jpg')"
        @change="onChange"></x-cropper>
</template>

<script setup>
import { assets } from '@/utils'
import { ref } from 'vue'

const cropperRef = ref()

function onChange(info) {
    console.log(info)
}
</script>

<style lang="less" scoped></style>

文件类型

<template>
    <x-cropper
        ref="cropperRef"
        :src="assets('avatar.jpg')"></x-cropper>
    <a-space class="mt-8-1">
        <a-button
            type="primary"
            @click="handleBase64">
            Base64
        </a-button>
        <a-button
            type="primary"
            @click="handleBlob">
            Blob
        </a-button>
        <a-button
            type="primary"
            @click="handleFile">
            File
        </a-button>
    </a-space>
</template>

<script setup>
import { assets } from '@/utils'
import { ref } from 'vue'
import { message } from 'ant-design-vue'

const cropperRef = ref()

async function handleBase64() {
    const result = await cropperRef.value.getBase64()
    console.log(result)
    message.success('已通过 console 打印')
}

async function handleBlob() {
    const result = await cropperRef.value.getBlob()
    console.log(result)
    message.success('已通过 console 打印')
}

async function handleFile() {
    const result = await cropperRef.value.getFile()
    console.log(result)
    message.success('已通过 console 打印')
}
</script>

<style lang="less" scoped></style>

弹窗中使用

<template>
    <a-button
        type="primary"
        @click="handleOpen">
        打开弹窗
    </a-button>
    <x-cropper-dialog
        ref="cropperDialogRef"
        @ok="onOk"></x-cropper-dialog>
</template>

<script setup>
import { assets } from '@/utils'
import { ref } from 'vue'
import { message } from 'ant-design-vue'

const cropperDialogRef = ref()

function handleOpen() {
    cropperDialogRef.value.open({
        src: assets('avatar.jpg'),
        aspectRatio: 1 / 1,
    })
}

function onOk(base64, info) {
    console.log(base64, info)
    message.success('已通过 console 打印')
}
</script>

<style lang="less" scoped></style>

API

Props

名称	说明	类型	默认值
src	图片地址	string	-
aspect-ratio	比例，例如：0 1/1 4/3 16/9	number	0
quality	输出质量，取值范围：0-1	number	1
type	图片类型，可选：jpg、png、gif	string	jpg

提示

在弹窗中使用时，同样支持以上选项

Events

名称	说明	返回值
initialized	初始化完成	cropper
change	裁剪尺寸发生变化	{ base64, blob, file }

Actions

名称	说明	返回值
getBase64	获取 base64 字符串	Promise
getFile	获取 File 对象	Promise
getBlob	获取二进制对象	Promise

提示

基于 cropperjs 实现，更多参数：https://www.npmjs.com/package/cropperjs。

可根据实际业务进行扩展。详见：/src/components/Cropper.vue。

警告

Cropper 被 CropperDialog 、 UploadImage 引用 ，自行扩展后请检查相关组件可用性