Gunakan vue-cropper untuk memangkas imej dalam projek vue

vueBagaimana untuk memangkas imej dalam projek? Artikel berikut akan memperkenalkan kepada anda cara menggunakan vue-cropper untuk memangkas imej saya harap ia akan membantu anda!

Disebabkan keperluan projek, pemangkasan imej diperlukan. Projek sebelumnya telah dilaksanakan oleh cropper.js Oleh kerana vue digunakan kali ini, komponen vue-cropper digunakan ia sangat mudah, tetapi terdapat banyak perangkap. (Belajar perkongsian video: tutorial video vue)

1. >2. Pemangkasan imej

npm install vue-cropper

main.js

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

1.

❗️Latar belakang imej yang dipangkas lalai mempunyai mozek yang hodoh . Gaya

.

2 Selepas muat naik selesai, masukkan VueCropper dengan tetikus untuk mula memangkas

Tetapkan acara

<div    style="max-width:90%">
            <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>

pada keperluan VueCroper (⭐️

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 展示看到的截图框宽高
     }

untuk ditambahkan untuk menggunakan peristiwa asli pada kata kunci asli komponen

)style="background-image:none"

3. Hentikan pemangkasan apabila anda meninggalkan VueCropper dan dapatkan gambar yang dipangkas.

Tetapkan acara @mouseenter.native="enter" pada VueCroper

Di sini saya memangkas apabila saya meninggalkan p, dan imej yang dipangkas diluluskan selepas mengklik butang pangkas, bukannya memangkas selepas mengklik butang potong, kerana saya Jika anda mengklik butang potong untuk memangkas, gambar yang anda dapat belum dipotong Saya tidak tahu mengapa, jadi saya datang dengan kaedah ini.

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

masalah pemangkasan imej vue-cropper

3 Gema bingkai tangkapan skrin kepada imej asal@mouseleave.native="leave"

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

Prinsip asas: <.>

Dapatkan lebar, ketinggian dan titik koordinat berasaskan kontena bagi kotak tangkapan skrin melalui kaedah di atas, kemudian biarkan kotak tangkap automatik VueCropper memaparkan dan tetapkan saiz dan kedudukan kotak tangkapan automatik.

Ambil medan nama sebagai contoh:
1 Tetapkan acara masukkan pada el-kad "nama"

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

2. . Pada semua Tetapkan acara cuti pada el-tabs pada lapisan luar el-card

{
          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
}

❗️Berhati-hati untuk tidak menetapkan acara cuti pada el-card , jika tidak, gerakkan tetikus ke el-kad seterusnya Bingkai pemangkasan akan dibatalkan dan dijana semula, menyebabkan halaman berkelip. <el-card></el-card>

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;
      });
    }

4 Lain

<el-tabs></el-tabs>

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

Hadkan bingkai tangkapan skrin kepada imej: https://github.com/xyxiao001/vue-cropper/issues /429

Penyelesaian: centerBox ditetapkan kepada benar, dan ia hanya akan berkuat kuasa apabila autoCrop=true

Projek perlu menghantar maklumat kedudukan dan saiz kotak tanaman ke latar belakang. Biarkan latar belakang memangkas atau lakukan OCR, tetapi imej yang dipangkas selepas dihantar ke latar belakang sentiasa diimbangi ke sudut kanan bawah: https://github.com/xyxiao001/vue-cropper/issues/386

Penyelesaian: Imej berskala Ya, apabila melepasi kedudukan, anda perlu menggunakan skala kedudukan*.

• 
  Tiada masalah untuk memangkas kebanyakan gambar, tetapi sentiasa ada sisihan semasa memangkas beberapa gambar: https://github.com /xyxiao001/vue-cropper/issues/439

  Penyelesaian: Ternyata saiz imej yang dipangkas lalai adalah terhad Lebar dan ketinggian maksimum ialah 2000px dan masalahnya selesai.

• 
  

• [Tutorial video berkaitan yang disyorkan:

  tutorial pengenalan vuejs
  ,

  bermula dengan web bahagian hadapan
]

Atas ialah kandungan terperinci Gunakan vue-cropper untuk memangkas imej dalam projek vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!