vue3 中使用vue img cutter 图片裁剪插件的方法_Vue.js

前言：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