快捷導(dǎo)航

vue3 中使用vue?img?cutter?圖片裁剪插件的方法

更新時間：2024年05月08日 10:05:51 作者：yqcoder

這篇文章主要介紹了vue3 中使用vue?img?cutter?圖片裁剪插件的方法,首先安裝依賴,構(gòu)建 components/ImgCutter.vue 組件,需要的朋友可以參考下

前言：vue-img-cutter 文檔，本文檔主要講解插件在 vue3 中使用。

一：安裝依賴

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

二：構(gòu)建 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>

四：參數(shù)

1. isModal

是否為彈窗模式，默認(rèn) true

<ImgCutter :isModal="true" />

2. showChooseBtn

是否顯示選擇圖片按鈕，默認(rèn) true

<ImgCutter :showChooseBtn="true" />

3. lockScroll

是否在 Dialog 出現(xiàn)時將 body 滾動鎖定，默認(rèn) true

<ImgCutter :lockScroll="true" />

4. label

默認(rèn)打開裁剪工具按鈕的顯示文字，默認(rèn) “選擇圖片”

<ImgCutter label="選擇圖片" />

5. boxWidth

裁剪工具寬度，默認(rèn) 800

<ImgCutter :boxWidth="800" />

6. boxHeight

裁剪工具高度，默認(rèn) 400

<ImgCutter :boxHeight="400" />

7. cutWidth

默認(rèn)裁剪寬度，默認(rèn) 200

<ImgCutter :cutWidth="200" />

8. cutHeight

默認(rèn)裁剪高度，默認(rèn) 200

<ImgCutter :cutHeight="200" />

9. tool

是否顯示工具欄，默認(rèn) true

<ImgCutter :tool="true" />

10. toolBgc

工具欄背景色，默認(rèn) #fff

<ImgCutter toolBgc="#fff" />

11. sizeChange

是否能夠調(diào)整裁剪框大小，默認(rèn) true

<ImgCutter :sizeChange="true" />

12. moveAble

能否調(diào)整裁剪區(qū)域位置，默認(rèn) true

<ImgCutter :moveAble="true" />

13. imgMove

能否拖動圖片，默認(rèn) true

<ImgCutter :imgMove="true" />

14. originalGraph

是否直接裁剪原圖，默認(rèn) false

<ImgCutter :originalGraph="false" />

15. crossOrigin

是否設(shè)置跨域，需要服務(wù)器做相應(yīng)更改，默認(rèn) false

<ImgCutter :crossOrigin="false" />

16. crossOriginHeader

設(shè)置跨域信息 crossOrigin 為 true 時才生效

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

17. rate

圖片比例，例："4:3"

<ImgCutter rate="4:3" />

18. WatermarkText

水印文字

<ImgCutter WatermarkText="水印" />

19. WatermarkTextFont

水印文字字體，默認(rèn) "12px Sans-serif"

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

20. WatermarkTextColor

水印文字顏色，默認(rèn) '#fff'

<ImgCutter WatermarkTextColor="#fff" />

21. WatermarkTextX

水印文字水平位置，默認(rèn) 0.95

<ImgCutter :WatermarkTextX="0.95" />

22. WatermarkTextY

水印文字垂直位置，默認(rèn) 0.95

<ImgCutter :WatermarkTextY="0.95" />

23. smallToUpload

如果裁剪尺寸固定且圖片尺寸小于裁剪尺寸則不裁剪直接返回文件，默認(rèn) false

<ImgCutter :smallToUpload="false" />

24. saveCutPosition

是否保存上一次裁剪位置及大小，默認(rèn) false

<ImgCutter :saveCutPosition="false" />

25. scaleAble

是否允許滾輪縮放圖片，默認(rèn) true

<ImgCutter :scaleAble="true" />

26. toolBoxOverflow

是否允許裁剪框超出圖片范圍，默認(rèn) true

<ImgCutter :toolBoxOverflow="true" />

27. index

自定義參數(shù)，將會同結(jié)果一起返回，默認(rèn) null

<ImgCutter index="aaaa" />

28. previewMode

裁剪過程中是否返回裁剪結(jié)果，如果裁剪出現(xiàn)卡頓時將此項設(shè)置為 false，默認(rèn) true

<ImgCutter :previewMode="true" />

29. fileType

返回的文件類型 ( png / jpeg / webp)，默認(rèn) png

<ImgCutter fileType="png" />

30. quality

圖像質(zhì)量，默認(rèn) 1

<ImgCutter :quality="1" />

31. accept

圖片類型，默認(rèn) 'image/gif, image/jpeg ,image/png'

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

五：鉤子函數(shù)

1. cutDown

完成截圖后要執(zhí)行的方法，返回值：Object

<ImgCutter @cutDown="cutDown" />

2. error

錯誤回調(diào)，返回值：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

確認(rèn)裁剪

<ImgCutter>
  <template #confirm> 確認(rèn)裁剪 </template>
</ImgCutter>

5. ratio

工具欄：寬高比

<ImgCutter>
  <template #ratio> 工具欄：寬高比 </template>
</ImgCutter>

6. scaleReset

工具欄：重置縮放

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

7. turnLeft

工具欄：向左旋轉(zhuǎn)

<ImgCutter>
  <template #turnLeft> 工具欄：向左旋轉(zhuǎn) </template>
</ImgCutter>

8. turnRight

工具欄：向右旋轉(zhuǎn)

<ImgCutter>
  <template #turnRight> 工具欄：向右旋轉(zhuǎn) </template>
</ImgCutter>

9. reset

工具欄：重置旋轉(zhuǎn)

<ImgCutter>
  <template #reset> 工具欄：重置旋轉(zhuǎn) </template>
</ImgCutter>

10. flipHorizontal

工具欄：水平翻轉(zhuǎn)

<ImgCutter>
  <template #flipHorizontal> 工具欄：水平翻轉(zhuǎn) </template>
</ImgCutter>

11. flipVertically