Cropper 图片裁剪

代码演示

基础用法

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

const cropperRef = ref()

function onChange(info) {
  // eslint-disable-next-line no-console
  console.log(info)
}
</script>

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

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

比例

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

const cropperRef = ref()

function onChange(info) {
  // eslint-disable-next-line no-console
  console.log(info)
}
</script>

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

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

文件类型

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

const cropperRef = ref()

async function handleBase64() {
  const result = await cropperRef.value.getBase64()
  // eslint-disable-next-line no-console
  console.log(result)
  message.success('已通过 console 打印')
}

async function handleBlob() {
  const result = await cropperRef.value.getBlob()
  // eslint-disable-next-line no-console
  console.log(result)
  message.success('已通过 console 打印')
}

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

<template>
  <x-cropper
    ref="cropperRef"
    :src="assets('avatar.jpg')"
  />
  <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>

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

弹窗中使用

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

const cropperDialogRef = ref()

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

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

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

<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 引用 ，自行扩展后请检查相关组件可用性