image-cropper-next v0.0.9

ImageCropper 图片裁剪

image-cropper是一个基于vue3 typescript开发的图片裁剪组件，展示区域，裁剪大小可自由控制。

安装

# via npm
npm i image-cropper-next

# via yarn
yarn add image-cropper-next

# via pnpm
pnpm add image-cropper-next

# via Bun
bun add image-cropper-next

使用，全局导入(main.ts/main.js)

import { createApp } from 'vue'
import ImageCropper from 'image-cropper-next'
const app = createApp(App)
app.use(ImageCropper)

使用，用的地方导入

默认方式，弹窗模式，不穿入任何参数

点击按钮后会打开弹窗，需要在内部选择图片，然后进行裁剪

<template>
  <image-cropper @confirm="confirm"></image-cropper>
  <img style="width: 200px;" :src="imgUrl" :alt="imgUrl">
</template>
<script setup>
import { ImageCropper } from 'image-cropper-next'
const imgUrl = ref('')
const imageCropperRef = ref()
const confirm = (data) => {
  imgUrl.value = data.dataURL
}
</script>

远端图片裁剪，弹窗模式，不穿入任何参数

自定义配置，通过ref触发open方法，需要传入图片地址，不传入则需要在内部选择图片进行裁剪 远端图片需要配置cross-origin为true，cross-origin-header为"anonymous"

<template>
  <button @click="imageCropperRef.open(image)">打开裁剪框</button>
  <image-cropper ref="imageCropperRef" :cross-origin="true" cross-origin-header="anonymous" @confirm="confirm">
    <template #open></template>
  </image-cropper>
  <img style="width: 200px;" :src="imgUrl" :alt="imgUrl">
</template>
<script setup>
import { ImageCropper } from 'image-cropper-next'
const imgUrl = ref('')

const image = new Image()
image.name = 'test'
image.src = 'https://node.wisdoms.xin/static/img/20230627/zb0XVS9bimage.png'

const imageCropperRef = ref()
const confirm = (data) => {
  imgUrl.value = data.dataURL
}
</script>

直接在页面中显示模式

可通过onPrintImg方法实时获取裁剪后的图片信息

<template>
  <image-cropper :isModal="false" @confirm="confirm" @onPrintImg="onPrintImg">
    <template #open></template>
  </image-cropper>
  <img style="width: 200px;" :src="imgUrl" :alt="imgUrl">
</template>

<script lang="ts" setup>
import { ImageCropper } from 'image-cropper-next'
import { ref } from 'vue';

const imgUrl = ref('')
const confirm = (data: any) => {
  console.log(data);
  imgUrl.value = data.dataURL
}
const onPrintImg = (data: any) => {
  console.log(data);
  imgUrl.value = data.dataURL
}
</script>

API

AvatarCropper Props

工具栏和底部操作栏均可以设置为不展示，通过ref进行自定义配置，也可通过slots进行自定义配置。

AvatarCropper Slots

AvatarCropper Events

AvatarCropper Ref

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。