快捷導(dǎo)航

vue3圖片剪裁插件vue-img-cutter使用小結(jié)

更新時(shí)間：2024年01月30日 09:36:49 作者：二條學(xué)前端

Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧

很多博主都寫了vue-img-cutter這個(gè)插件怎么用，并且官網(wǎng)也有案例，但都是從上傳圖片開始的。我想要的是本來(lái)就有圖片不用用戶重新上傳或者先刪掉當(dāng)前的圖片再上傳裁剪，重點(diǎn)就是：已經(jīng)有圖片了。

接下來(lái)說(shuō)說(shuō)實(shí)現(xiàn)代碼吧

1.首先下載、安裝vue-img-cutter依賴

npm install vue-img-cutter --save-dev
或者
yarn add vue-img-cutter --save-dev

2.創(chuàng)建CutterImg.vue文件

先在官網(wǎng)上選擇配置，生成案例代碼，然后扒拉下來(lái)，進(jìn)行修改(官網(wǎng):vue-img-cutter)，官網(wǎng)上就是從開始上傳圖片開始的，如果需要官網(wǎng)的效果直接復(fù)制官網(wǎng)的代碼修改即可。

3.接下來(lái)是根據(jù)我自己的需求修改的代碼:

<template>
    <div>
      <div style="display: flex; flex-direction: row">
        <ImgCutter
          ref="imgCutterModal"
          v-on:cutDown="cutDownImg"
          :WatermarkText="''"
          :is-modal="false"
          :tool="false"
          :sizeChange="false"
          :boxWidth="700"
          :boxHeight="458"
          :cutWidth="470"
          :cutHeight="270"
          @onPrintImg="cutterPrintImg"
          :originalGraph="true"
          style="padding: 10px"
        >
          <template #cancel>
            <div></div>
          </template>
        </ImgCutter>
        <div style="margin-left: 10px; padding: 10px">
          <div
            style="
              margin-left: 10px;
              padding-bottom: 20px;
              font-size: 18px;
              font-weight: bold;
            "
          >
            圖像預(yù)覽
          </div>
          <div style="width: 470px;height: 270px; border: 1px solid #e8e8e8; background-color: rgba(0, 0, 0, 0.1)">
            <img :src="temImgPath" style="width: 100%" />
          </div>
        </div>
      </div>
    </div>
  </template>

<script setup>
  import ImgCutter from "vue-img-cutter";//引入vue-img-cutter
  import { ref, watch, onMounted} from "vue";
  const emit = defineEmits(["getCoverImage"]);//與父組件事件通信
  const props = defineProps({
    imgUrl: String,
  });
  const temImgPath = ref("");
  const imgCutterModal=ref();
  watch(
    () => props.imgUrl,
    (val, o) => {
      temImgPath.value = props.imgUrl;
      imgCutterModal.value.handleOpen({
          name:"封面圖片",
          src:props.imgUrl
      });
    }
  );
  //實(shí)時(shí)更新預(yù)覽效果
  function cutterPrintImg(obj) {
    temImgPath.value = obj.dataURL;
  }
  // 圖片裁剪點(diǎn)擊確認(rèn)后觸發(fā)
  function cutDownImg(option) {
     //向后端發(fā)送請(qǐng)求等
     //請(qǐng)求成功時(shí)，emit("getCoverImage")，讓父組件再次獲取剛修改的新圖片
  }
  </script>

<style lang="less" scoped>
  .remove-btn-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    text-align: center;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
  }
  .ant-upload:hover .remove-btn-wrap {
    display: flex;
  }
  :deep(.ant-upload) {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 2px;
    }
  }
  :deep(.copyright a[data-v-391393b9]){
      display: none !important;
    }
  </style>

父組件:也就是你想要用到圖片剪裁的組件

<template>
<CutterImg :imgUrl="imgData.propsURL" @getCoverImage="getCoverImage"></CutterImg>
</template>
<script setup>
import CutterImg from "@/components/CutterImg.vue";
//獲取封面圖片
const getCoverImage = () => {
  //發(fā)送請(qǐng)求
}
</script>

imgData.propsURL是來(lái)自于后端請(qǐng)求獲取到的目前頁(yè)面顯示的圖片地址。請(qǐng)自行替換。