图片实现裁剪功能vue-img-cutter

最新推荐文章于 2025-05-12 12:14:48 发布

指标满载

最新推荐文章于 2025-05-12 12:14:48 发布

阅读量3.1k

点赞数 1

文章标签： vue-img-cutter 裁剪图片裁剪

本文链接：https://blog.youkuaiyun.com/weixin_44770377/article/details/105161077

版权

本文介绍了如何使用vue-img-cutter在Vue项目中实现图片裁剪功能。包括直接选择图片进行裁剪和通过el-upload组件上传图片后再进行裁剪，详细讲解了安装、引入和组件配置方法，特别提到了使用远程图片裁剪时的crossOrigin属性设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码：添加链接描述
演示地址，可生成对应组件属性：添加链接描述

一、选择图片时直接实现裁剪功能

1、安装

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

2、引入

import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
...
}

3、在页面中使用：

<ImgCutter  ref="imgCutterModal"
                              :cross-origin="true"
                              :tool-bgc="none"
                              :is-modal="true"
                              :show-choose-btn="true"
                              :lock-scroll="true"
                              :box-width="900"
                              :box