【Vue 2 / Vue 3】一个简单易用、功能强大的图片裁剪插件，开源且免费！

最新推荐文章于 2025-10-11 17:39:30 发布

转载最新推荐文章于 2025-10-11 17:39:30 发布 · 925 阅读

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s?__biz=MzI5MjUxNjA4Mw==&mid=2247498000&idx=1&sn=6278472fdc189910f6489dba5ab75d83&chksm=ed699cbd4003e553e1d7b12578bd0d228aa35399426f0888fcdf2fb193f9495b203976547125&scene=126&sessionid=0

文章标签：

#vue.js #开源 #前端 #javascript #ecmascript

大家好，我是CodeQi！ 一位热衷于技术分享的码仔。

图片裁剪是许多现代网页应用不可或缺的功能，无论是社交媒体平台、电子商务网站，还是后台管理系统，都需要高效的图片处理工具。vue-img-cutter 是一款基于 Vue3 的图片裁剪插件，拥有旋转、缩放、平移、固定比例裁剪、远程图片裁剪等强大功能，且使用简单、兼容性好，特别适合那些需要快速集成图片裁剪功能的项目。今天，我将介绍如何在 Vue3 项目中使用 vue-img-cutter，并分享一些实用的经验与见解。

vue-img-cutter 简介

vue-img-cutter 是一款开源的图片裁剪插件，支持 Vue2 和 Vue3，并提供了丰富的功能，能够满足各种图片处理需求。这个插件不仅支持多种裁剪模式，还可以对远程图片进行裁剪，并且可以在浏览器中跨域处理图片。它易于集成且高度可定制，非常适合各种项目场景。

主要特点

• 兼容性强：支持主流浏览器，包括 IE9+、MSEdge、Chrome 和 Firefox。
• 多种展现形式：支持行内或弹窗两种展现形式。
• 高级裁剪功能：包括旋转、缩放、平移，以及固定比例和尺寸的裁剪。
• 远程图片裁剪：支持对远程图片进行裁剪，并且支持跨域处理。
• 简单易用：只需几行代码即可集成，能够快速适应不同的业务需求。

项目在线预览

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

仓库地址

https://gitee.com/GLUESTICK/vue-img-cutter

功能截图

项目搭建与使用

1. 安装 vue-img-cutter

在你的 Vue3 项目中，通过 npm 安装 vue-img-cutter：

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

2. 引入并注册组件

在使用 script setup 语法的组件中，你可以直接引入并注册 ImgCutter 组件。以下是如何在 Vue 组件中引入并使用它的示例：

<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>

3. 在页面中使用 ImgCutter

ImgCutter 组件可以非常容易地添加到你的页面中。你可以简单地将其嵌入到你的模板中，并使用 cutDown 事件处理裁剪后的数据：

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

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

const handleCut = (croppedData) => {
  console.log('裁剪后的文件名:', croppedData.fileName);
  console.log('裁剪后的 Blob:', croppedData.blob);
};
</script>

4. 自定义裁剪工具的界面和功能

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

<template>
  <ImgCutter 
    :cutWidth="300" 
    :cutHeight="300" 
    :tool="true" 
    v-on:cutDown="handleCut" />
</template>

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

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

5. 处理远程图片与跨域

vue-img-cutter 支持远程图片裁剪，并且能够处理跨域问题。你可以在代码中传入图片的 URL 和名称，插件会自动处理这些参数，并展示图片：

<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>