Verwenden Sie Vue-Cropper, um Bilder in Vue-Projekten zuzuschneiden

vueWie beschneide ich Bilder im Projekt? Der folgende Artikel stellt Ihnen vor, wie Sie Vue-Cropper zum Zuschneiden von Bildern verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Aufgrund der Projektanforderungen ist ein Bildzuschnitt erforderlich. Das vorherige Projekt wurde von Cropper.js implementiert. Da dieses Mal Vue verwendet wird, ist die Verwendung der Vue-Cropper-Komponente sehr einfach, es gibt jedoch viele Fallstricke. (Lernvideo-Sharing: vue-Video-Tutorial

1. Installation

npm install vue-cropper

main.js

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

main.js

<div  style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
            <vueCropper
              @mouseenter.native="enter"
              @mouseleave.native="leave"
              ref="cropper"
              :img="uploadImg"
              :outputSize="option.size"
              :outputType="option.outputType"
              :info="true"
              :full="option.full"
              :canMove="option.canMove"
              :canMoveBox="option.canMoveBox"
              :original="option.original"
              :autoCrop="option.autoCrop"
              :fixed="option.fixed"
              :fixedNumber="option.fixedNumber"
              :centerBox="option.centerBox"
              :infoTrue="option.infoTrue"
              :fixedBox="option.fixedBox"
              style="background-image:none"
            ></vueCropper>
</div>

二、图片裁剪

1、引入VueCropper组件，并设置相关的属性。

option: {
       info: true, // 裁剪框的大小信息
       outputSize: 0.8, // 裁剪生成图片的质量
       outputType: "jpeg", // 裁剪生成图片的格式
       canScale: false, // 图片是否允许滚轮缩放
       autoCrop: false, // 是否默认生成截图框
       fixedBox: false, // 固定截图框大小 不允许改变
       fixed: false, // 是否开启截图框宽高固定比例
       fixedNumber: [7, 5], // 截图框的宽高比例
       full: true, // 是否输出原图比例的截图
       canMove: false, //时候可以移动原图
       canMoveBox: true, // 截图框能否拖动
       original: false, // 上传图片按照原始比例渲染
       centerBox: false, // 截图框是否被限制在图片里面
       infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
     }

enter() {
 if (this.uploadImg == "") {
   return;
 }
 this.$refs.cropper.startCrop(); //开始裁剪
},

❗️默认的裁剪图片的背景带有贼丑的马赛克，其实是它用了一张马赛克的图片做背景，去掉只需在VueCropper上设置去除背景图片的样式style="background-image:none".

2、上传完成后鼠标进入VueCropper即可以开始裁剪

在VueCroper上设置@mouseenter.native="enter"事件(⭐️组件上使用原生事件需要加上native关键字)

leave() {
   this.$refs.cropper.stopCrop();//停止裁剪
   this.$refs.cropper.getCropData(data => { //获取截图的base64格式数据
     this.cutImg = data;
   });
   // this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据
   //   this.cutImg = data;
   // });
 },

3、离开VueCropper即停止裁剪，得到裁剪图片。

在VueCroper上设置@mouseleave.native="leave"事件

this.$refs.cropper.getCropAxis() //获取截图框基于容器的坐标点 {x1: 174, x2: 131, y1: 86, y2: 58}
this.$refs.cropper.cropW  //截图框宽
this.$refs.cropper.cropH //截图框高

我这里是离开p就会裁剪，点击裁剪按钮后传递裁剪图片，而不是点击裁剪按钮才裁剪，因为我点击裁剪按钮裁剪的话，拿到的图片并没有裁剪过，我也不知道为什么，就想出了这个办法。
vue-cropper图片裁剪问题

三、将截图框回显到原图上

基本原理:

{
          id: 1,
          name: "姓名",
          cropInfo: {
            width: 108, //this.$refs.cropper.cropW
            height: 56, //this.$refs.cropper.cropH 
            offsetX: 174, //this.$refs.cropper.getCropAxis().x1
            offsetY: 86  //this.$refs.cropper.getCropAxis().y1
}

通过上面的方式获取截图框的宽、高和基于容器的坐标点,然后让VueCropper的自动截取框显示出来并设置自动截取框的大小和位置。

以姓名字段为例:

enterCard(refWord) {
      this.$refs.cropper.goAutoCrop();//重新生成自动裁剪框
      this.$nextTick(() => {
        // if cropped and has position message, update crop box
        //设置自动裁剪框的宽高和位置
        this.$refs.cropper.cropOffsertX = refWord.cropInfo.offsetX;
        this.$refs.cropper.cropOffsertY = refWord.cropInfo.offsetY;
        this.$refs.cropper.cropW = refWord.cropInfo.width;
        this.$refs.cropper.cropH = refWord.cropInfo.height;
      });
    }

1、在"姓名"el-card上设置enter事件<el-card></el-card>

leaveCard() {
      this.$refs.cropper.clearCrop(); //取消裁剪框
    }

2、在所有el-card外层的el-tabs上设置leave事件<el-tabs></el-tabs>
2. Bildzuschnitt

1. Stellen Sie die VueCropper-Komponente vor und legen Sie zugehörige Eigenschaften fest. rrreeerrreee

❗️Der Hintergrund des standardmäßig zugeschnittenen Bildes hat ein hässliches Mosaik. Um es zu entfernen, legen Sie einfach den Stil fest, um das Hintergrundbild auf VueCropper style="background" zu entfernen - image:none".

• 2. Nachdem der Upload abgeschlossen ist, geben Sie die Maus in VueCropper ein, um mit dem Zuschneiden zu beginnen

  
  Setzen Sie das Ereignis @mouseenter.native="enter" in VueCroper (⭐️Um native Ereignisse für die Komponente zu verwenden, müssen Sie das native Schlüsselwort hinzufügen)

  rrreee
3 Stoppen Sie das Zuschneiden, wenn Sie VueCropper verlassen und das zugeschnittene Bild erhalten.

• Setzen Sie das @mouseleave.native="leave"-Ereignis auf VueCroper
  rrreee

  Hier werde ich zuschneiden, wenn ich p verlasse. Nachdem ich auf die Schaltfläche zum Zuschneiden geklickt habe, übergebe ich das zugeschnittene Bild, anstatt es danach zuzuschneiden Als ich auf die Schaltfläche „Zuschneiden“ klickte, wusste ich nicht, warum, also habe ich mir diese Methode ausgedacht.
Vue-Cropper-Bildzuschneideproblem

• 
  3. Echo des Screenshot-Rahmens auf das Originalbild

Grundprinzip:

rrreeeErmitteln Sie die Breite, Höhe und Container-basierten Koordinatenpunkte des Screenshot-Rahmens mit der oben genannten Methode und lassen Sie VueCropper diese dann automatisch erfassen Rahmen Zeigen Sie ihn an und legen Sie die Größe und Position des automatischen Erfassungsrahmens fest. Nehmen Sie das Namensfeld als Beispiel:rrreee

1. Legen Sie das Eingabeereignis auf der El-Karte „Name“ <el-card></el-card> 🎜rrreee🎜2. Legen Sie das Urlaubsereignis für alle El-Tabs außerhalb der El-Karte fest <el-tabs></el-tabs>🎜🎜rrreee 🎜❗️ Achten Sie darauf, das Verlassen-Ereignis nicht auf der El-Karte festzulegen. Andernfalls wird das Zuschneidefeld abgebrochen und neu generiert, wenn Sie die Maus zur nächsten El-Karte bewegen, wodurch die Seite flackert. 🎜🎜🎜4. Andere🎜🎜🎜🎜🎜Beschränken Sie das Screenshot-Feld auf das Bild: https://github.com/xyxiao001/vue-cropper/issues/429🎜 Lösung: centerBox ist auf true gesetzt und nur autoCrop=true Es wird nur wirksam, wenn 🎜🎜🎜🎜Das Projekt die Positionsinformationen und die Größe des Zuschneidefelds an den Hintergrund senden muss, damit der Hintergrund zuschneiden oder OCR durchführen kann, das zugeschnittene Bild jedoch immer, nachdem es an den Hintergrund gesendet wurde Versatz zur unteren rechten Ecke: https://github.com/xyxiao001/vue-cropper/issues/386🎜 Lösung: Beim Übergeben der Position müssen Sie position*scale verwenden.🎜🎜🎜🎜Das gibt es Bei den meisten Bildern ist das Zuschneiden kein Problem, aber bei manchen Bildern gibt es immer eine Abweichung im Bild: https://github.com/xyxiao001/vue-cropper/issues/439🎜 Lösung: Es stellt sich heraus, dass die Standardgröße des zugeschnittenen Bildes begrenzt ist , die maximale Breite und Höhe beträgt 2000 Pixel, setzen Sie diesen Wert auf 10000, Problem gelöst

Das obige ist der detaillierte Inhalt vonVerwenden Sie Vue-Cropper, um Bilder in Vue-Projekten zuzuschneiden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!