Skip to content

Vue3 developed an image clipping tool, you can dynamically modify the size of the clipping box, you can also preview the effect of cutting in real time.

Notifications You must be signed in to change notification settings

yi-boide/vue-image-cropper

Repository files navigation

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进行自定义配置。

属性名 描述 类型 默认值 是否必需
cross-origin 是否设置图片跨域 Boolean false
cross-origin-header 是否设置图片跨域 String '*'
label 按钮文字 String '选择图片'
is-modal 是否已弹窗形式展示 Boolean true
lock-scroll 是否在弹窗出现时锁定body Boolean true
show-choose-btn 是否显示选择图片按钮 Boolean true
box-width 裁剪窗口高度 Number 800
box-height 裁剪窗口高度 Number 400
cut-width 默认裁剪宽度 Number 200
cut-height 默认裁剪高度 Number 200
rate 按比例裁剪,例(2:1) String null
tool 是否显示工具栏 Boolean true
tool-bg 工具栏背景色 String '#fff'
img-move 能否拖动图片 Boolean true
size-change 能否调整裁剪尺寸 Boolean true
original-graph 是否为原图裁剪 Boolean false
move-able 能否调整裁剪区域位置 Boolean true
preview-mode 裁剪过程中是否返回裁剪结果 裁剪原图卡顿时将此项设置为false Boolean true
watermark-text 水印文字 String ''
watermark-text-font 水印文字样式 String '12px Sans-serif'
watermark-text-color 水印文字颜色 String '#fff'
watermark-text-x 水印横向位置 Number 0.95
watermark-text-y 水印纵向位置 Number 0.95
small-to-upload 选择的图片宽高均小于裁剪宽高度时候直接上传原图 Boolean false
save-cut-position 是否保存上一次裁剪位置 Boolean false
scale-able 是否允许缩放图片 Boolean true
file-type 文件类型 String 'png'
tool-box-overflow 是否允许裁剪框超出图片 Boolean true
quality 裁剪后的图片质量 Number 1
is-finish-close 是否在裁剪完成后关闭弹窗 Boolean true
footer 是否显示底部操作栏 Boolean true

AvatarCropper Slots

名称 描述
open 弹窗模式,初始状态下显示的内容,设置后label文字按钮将不再显示(showChooseBtn为true时生效)
title 自定义title内容
ratio 控制该(Ratio: )内容
scale 控制该(Scale: )内容
rotateLeft 控制该(↳)内容
rotateRight 控制该(↲)内容
resetRotate 控制该(↻)内容
flipHorizontal 控制该(⇆)内容
flipVertically 控制该(⇅)内容
choose 左下角显示的选择文件按钮(showChooseBtn为true时生效)
cancel 取消按钮(清除画布/关闭弹窗)
confirm 确认按钮(确认裁剪)
footer 底部操作栏

AvatarCropper Events

名称 描述 回调参数
confirm 点击确认后触发 (dataFile: DataFile)
realTime 实现渲染触发,每次更改裁剪内容都会触发 (dataFile: DataFile)
error 错误时触发 错误信息
clearAll 清除所有内容 -

AvatarCropper Ref

事件名 说明 参数
close 取消 -
open 打开裁剪框 image图片,必须要有src属性(new Image())
chooseImage 选择图片 -
flipDirection 反向翻转,默认值:horizontal,可选值:vertically (direction: FlipDirection)
resetScale 重置缩放 -
resetRotate 重置旋转 -
rotate 旋转角度 (angle: number)
cropImage 裁剪图片, doNotReset:是否实时返回截取结果, callback: 返回对象回调 (doNotReset: boolean, callback: (dataFile: DataFile) => void)

样式变量

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

名称 默认值 描述
--image-cropper-primary-color #409eff 主题颜色
--image-cropper-primary-color-hover #66b1ff 主题颜色hover
--image-cropper-primary-color-light #c6e2ff 主题颜色次色
--image-cropper-warning-color #e6a23c warning色调
--image-cropper-warning-color-hover #ebb563 warning色调hover

About

Vue3 developed an image clipping tool, you can dynamically modify the size of the clipping box, you can also preview the effect of cutting in real time.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published