【工具集合】前端图片裁剪工具-vue-img-cutter

Vue-img-cutter是一款基于Vue3的图片裁剪插件，提供旋转、缩放、平移等多种功能，适用于各类网页应用。其简单易用、兼容性强，能快速集成至项目中，满足固定比例裁剪和远程图片处理需求。本文将指导如何在Vue3项目中高效使用vue-img-cutter。

主要特点

• 兼容性强：支持主流浏览器，包括 IE9+、MSEdge、Chrome 和 Firefox。

• 多种展现形式：支持行内或弹窗两种展现形式。

• 高级裁剪功能：包括旋转、缩放、平移，以及固定比例和尺寸的裁剪。

• 远程图片裁剪：支持对远程图片进行裁剪，并且支持跨域处理。

• 简单易用：只需几行代码即可集成，能够快速适应不同的业务需求。

在线预览

https://www.ihtmlcss.com/demo/dist/#/croptool

项目地址

https://github.com/acccccccb/vue-img-cutter

帆越工具集中测试使用

https://tool.fanyuexinfu.com/img-cutter

功能截图

使用方式

npm install vue-img-cutter --save-dev

引入并使用

<template>
  <ImgCutter v-on:cutDown="handleCut" />
</template>

<script setup>
import { ref } from 'vue';
import ImgCutter from 'vue-img-cutter';

const handleCut = (croppedData) => {
  console.log('裁剪后的数据:', croppedData);
};
</script>

该插件提供了丰富的属性和插槽，可以帮助你定制裁剪工具的界面和功能。以下是如何自定义裁剪框尺寸、工具栏等属性。

支持处理远程图片

<template>
  <button @click="openCropper">裁剪远程图片</button>
  <ImgCutter ref="imgCutter" v-on:cutDown="handleCut" />
</template>

<script setup>
import { ref } from 'vue';
import ImgCutter from 'vue-img-cutter';

const imgCutter = ref(null);

const openCropper = () => {
  imgCutter.value.handleOpen({
    name: 'image.jpg',
    src: 'http://example.com/image.jpg',
  });
};

const handleCut = (croppedData) => {
  console.log('裁剪结果:', croppedData);
};
</script>

快试试吧！