vue-img-cutter 图片裁剪详解

简介: vue-img-cutter 图片裁剪详解

前言:vue-img-cutter 文档,本文档主要讲解插件在 vue3 中使用。

一:安装依赖

npm install vue-img-cutter
# or
yarn add vue-img-cutter
# or
pnpm add vue-img-cutter

二:构建 components/ImgCutter.vue 组件

<script setup lang="ts">
  import ImgCutter from "vue-img-cutter";
  import { updateAvatar } from "@/api/user.ts";
 
  let emits = defineEmits(["getUrl"]);
  let cutDown = (data: any) => {
    let formData = new FormData();
    let { file } = data;
    formData.append("file", file);
    updateAvatar(formData).then((res) => {
      emits("getUrl", res);
    });
  };
</script>
 
<template>
  <ImgCutter @cutDown="cutDown"></ImgCutter>
</template>
 
<style lang="scss" scoped></style>

三:使用组件

<script setup lang="ts">
  import ImgCutter from "@/components/ImgCutter.vue";
 
  const getUrl = (str: any) => {
    console.log(1, str);
  };
</script>
 
<template>
  <div class="index">
    <ImgCutter @getUrl="getUrl" />
  </div>
</template>

四:参数

1. isModal

是否为弹窗模式,默认 true

<ImgCutter :isModal="true" />

2. showChooseBtn

是否显示选择图片按钮,默认 true

<ImgCutter :showChooseBtn="true" />

3. lockScroll

是否在 Dialog 出现时将 body 滚动锁定,默认 true

<ImgCutter :lockScroll="true" />

4. label

默认打开裁剪工具按钮的显示文字,默认 “选择图片”

<ImgCutter label="选择图片" />

5. boxWidth

裁剪工具宽度,默认 800

<ImgCutter :boxWidth="800" />

6. boxHeight

裁剪工具高度,默认 400

<ImgCutter :boxHeight="400" />

7. cutWidth

默认裁剪宽度,默认 200

<ImgCutter :cutWidth="200" />

8. cutHeight

默认裁剪高度,默认 200

<ImgCutter :cutHeight="200" />

9. tool

是否显示工具栏,默认 true

<ImgCutter :tool="true" />

10. toolBgc

工具栏背景色,默认 #fff

<ImgCutter toolBgc="#fff" />

11. sizeChange

是否能够调整裁剪框大小,默认 true

<ImgCutter :sizeChange="true" />

12. moveAble

能否调整裁剪区域位置,默认 true

<ImgCutter :moveAble="true" />

13. imgMove

能否拖动图片,默认 true

<ImgCutter :imgMove="true" />

14. originalGraph

是否直接裁剪原图,默认 false

<ImgCutter :originalGraph="false" />

15. crossOrigin

是否设置跨域,需要服务器做相应更改,默认 false

<ImgCutter :crossOrigin="false" />

16. crossOriginHeader

设置跨域信息 crossOrigin 为 true 时才生效

<ImgCutter :crossOrigin="true" crossOriginHeader="" />

17. rate

图片比例,例:"4:3"

<ImgCutter rate="4:3" />

18. WatermarkText

水印文字

<ImgCutter WatermarkText="水印" />

19. WatermarkTextFont

水印文字字体,默认 "12px Sans-serif"

<ImgCutter WatermarkTextFont="12px Sans-serif" />

20. WatermarkTextColor

水印文字颜色,默认 '#fff'

<ImgCutter WatermarkTextColor="#fff" />

21. WatermarkTextX

水印文字水平位置,默认 0.95

<ImgCutter :WatermarkTextX="0.95" />

22. WatermarkTextY

水印文字垂直位置,默认 0.95

<ImgCutter :WatermarkTextY="0.95" />

23. smallToUpload

如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件,默认 false

<ImgCutter :smallToUpload="false" />

24. saveCutPosition

是否保存上一次裁剪位置及大小,默认 false

<ImgCutter :saveCutPosition="false" />

25. scaleAble

是否允许滚轮缩放图片,默认 true

<ImgCutter :scaleAble="true" />

26. toolBoxOverflow

是否允许裁剪框超出图片范围,默认 true

<ImgCutter :toolBoxOverflow="true" />

27. index

自定义参数,将会同结果一起返回,默认 null

<ImgCutter index="aaaa" />

28. previewMode

裁剪过程中是否返回裁剪结果,如果裁剪出现卡顿时将此项设置为 false,默认 true

<ImgCutter :previewMode="true" />

29. fileType

返回的文件类型 ( png / jpeg / webp),默认 png

<ImgCutter fileType="png" />

30. quality

图像质量,默认 1

<ImgCutter :quality="1" />

31. accept

图片类型,默认 'image/gif, image/jpeg ,image/png'

<ImgCutter accept="image/gif, image/jpeg ,image/png" />

五:钩子函数

1. cutDown

完成截图后要执行的方法,返回值:Object

<ImgCutter @cutDown="cutDown" />

2. error

错误回调,返回值:Error object

<ImgCutter @error="error" />

3. onChooseImg

选择图片后,返回值:Object

<ImgCutter @onChooseImg="onChooseImg" />

4. onPrintImg

在画布上绘制图片,返回值:Object

<ImgCutter @onPrintImg="onPrintImg" />

5. onClearAll

清空画布,返回值:null

<ImgCutter @onClearAll="onClearAll" />

六:插槽

1. open 或 openImgCutter

弹出裁剪框

<ImgCutter>
  <template #open> 选择图片 </template>
</ImgCutter>

2. choose

选择本地图片

<ImgCutter>
  <template #choose> 选择图片 </template>
</ImgCutter>

3. cancel

取消/清空

<ImgCutter>
  <template #cancel> 取消 </template>
</ImgCutter>

4. confirm

确认裁剪

<ImgCutter>
  <template #confirm> 确认裁剪 </template>
</ImgCutter>

5. ratio

工具栏:宽高比

<ImgCutter>
  <template #ratio> 工具栏:宽高比 </template>
</ImgCutter>

6. scaleReset

工具栏:重置缩放

<ImgCutter>
  <template #scaleReset> 取消 </template>
</ImgCutter>

7. turnLeft

工具栏:向左旋转

<ImgCutter>
  <template #turnLeft> 工具栏:向左旋转 </template>
</ImgCutter>

8. turnRight

工具栏:向右旋转

<ImgCutter>
  <template #turnRight> 工具栏:向右旋转 </template>
</ImgCutter>

9. reset

工具栏:重置旋转

<ImgCutter>
  <template #reset> 工具栏:重置旋转 </template>
</ImgCutter>

10. flipHorizontal

工具栏:水平翻转

<ImgCutter>
  <template #flipHorizontal> 工具栏:水平翻转 </template>
</ImgCutter>

11. flipVertically

工具栏:重置旋转

<ImgCutter>
  <template #flipVertically> 工具栏:垂直翻转 </template>
</ImgCutter>


目录
相关文章
|
6月前
|
JavaScript
如何在Vue页面中引入img下的图片作为背景图。../的使用
这篇文章介绍了在Vue页面中如何引入`img`目录下的图片作为背景图,提供了两种使用相对路径的方法。第一种是使用`../assets/img/`作为路径引入图片,第二种是使用`../../assets/img/`作为路径。文章还展示了使用这些方法的代码实现和效果展示,并鼓励读者学无止境。
如何在Vue页面中引入img下的图片作为背景图。../的使用
|
30天前
|
移动开发 前端开发 JavaScript
React 图片裁剪组件 Image Cropper
本文介绍了在React中实现图片裁剪功能的方法,涵盖基础知识、常见问题及解决方案。首先,通过第三方库如`react-image-crop`或`cropperjs-react`可轻松实现图片裁剪。接着,针对性能和兼容性问题,提供了优化图片加载、处理裁剪区域响应慢、解决浏览器差异等方案。最后,通过代码案例详细解释了如何创建一个基本的图片裁剪组件,并提出了优化建议,如使用`React.memo`、添加样式支持及处理大图片预览,帮助开发者避免常见错误并提升用户体验。
116 67
|
27天前
|
前端开发 UED 索引
React 图片灯箱组件 Image Lightbox
图片灯箱组件是一种常见的Web交互模式,用户点击缩略图后弹出全屏窗口展示大图,并提供导航功能。本文介绍了基于React框架的图片灯箱组件开发,涵盖初始化状态管理、图片加载与预加载、键盘和鼠标事件处理等常见问题及解决方案。通过`useState`和`useEffect`钩子管理状态,使用懒加载和预加载优化性能,确保流畅的用户体验。代码案例展示了组件的基本功能实现,包括打开/关闭灯箱、切换图片及键盘操作。
127 80
|
Web App开发 JavaScript 前端开发
Vue上传图片裁剪预览插件vue-img-cutter的使用
Vue上传图片裁剪预览插件vue-img-cutter的使用
487 0
|
资源调度 数据库
使用 “vue-cropper“ 进行图片裁剪
使用 “vue-cropper“ 进行图片裁剪
|
6月前
|
容器
Vue3图片(Image)
该图片预览组件提供丰富的功能,包括设置鼠标悬浮预览文本、图像描述、尺寸调整、适应容器模式等。支持单张或多张图片展示,具备旋转、缩放、镜像等功能,并可通过键盘或滚轮控制。组件允许自定义多项属性,如图像地址、宽度、高度、边框显示等,并兼容多种使用场景,如相册模式和循环切换。组件内部使用了 Vue3 的 `Spin` 和 `Space` 组件以及 `add` 函数辅助实现。
166 2
Vue3图片(Image)
|
7月前
|
JavaScript
vue 头像修改-裁剪图片 vue-cropper
vue 头像修改-裁剪图片 vue-cropper
188 0
|
前端开发 JavaScript Java
基于cropper.js的图片上传和裁剪
基于cropper.js的图片上传和裁剪
284 0
|
9月前
|
JavaScript 索引 容器
vue element plus Image 图片
vue element plus Image 图片
173 0
|
29天前
|
前端开发 JavaScript API
React 图片放大组件 Image Zoom
本文介绍如何使用React创建图片放大组件(Image Zoom),提升用户体验。组件通过鼠标悬停或点击触发放大效果,利用`useState`管理状态,CSS实现视觉效果。常见问题包括图片失真、性能下降和移动端支持,分别可通过高质量图片源、优化事件处理和添加触摸事件解决。易错点涉及状态管理混乱、样式冲突和过多事件绑定,建议使用上下文API、CSS模块及优化事件绑定逻辑。高级功能扩展如多张图片支持和自定义放大区域进一步丰富了组件的实用性。
58 25

热门文章

最新文章