vue-cropper を使用して vue プロジェクト内の画像をトリミングする

vueプロジェクト内の画像をトリミングするにはどうすればよいですか?次の記事ではvue-cropperを使って画像をトリミングする方法を紹介しますので、ご参考になれば幸いです。

プロジェクトのニーズにより、画像のトリミングが必要です。前回のプロジェクトは Cropper.js で実装していましたが、今回は vue を使用するため vue-cropper コンポーネントを使用します。使い方は非常に簡単ですが、落とし穴もたくさんあります。 (学習ビデオ共有: vue ビデオ チュートリアル )

1. インストール

npm install vue-cropper

main.js

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

2. 画像のトリミング

1. VueCropper コンポーネントを導入し、関連するプロパティを設定します。

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

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

❗️デフォルトのトリミング画像の背景には醜いモザイクがかかっています。実際には、モザイク画像が背景として使用されています。これを削除するには、VueCropper で背景画像を削除するスタイルを設定するだけです style ="background-image:none".

2. アップロードが完了したら、マウスで VueCropper に入り、トリミングを開始します

VueCroper@ に設定します。 Mouseenter.native="enter "Event (⭐️ コンポーネントでネイティブ イベントを使用するには、ネイティブ キーワード )

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

3 を追加する必要があります。トリミングを停止して取得するには、VueCropper をそのままにしておきます。切り取られた写真。

VueCroper に設定します@mouseleave.native="leave"Event

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

p を離れるときに切り抜きます。切り抜きボタンをクリックした後、トリミングボタンをクリックしてトリミングしても、得られる写真はトリミングされないので、トリミングするためにトリミングボタンをクリックする必要はありませんが、理由がわからないので、この方法を思いつきました。
vue-cropper 画像のトリミングの問題

3. スクリーンショット フレームを元の画像にエコーする

基本原則:

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

上記のメソッドを使用して、スクリーンショット フレームの幅、高さ、コンテナベースの座標点を取得し、VueCropper の自動キャプチャ フレームを表示させ、自動キャプチャ フレームのサイズと位置を設定します。

名前フィールドを例に挙げます:

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

1.「名前」el-card に Enter イベントを設定します <el-card @mouseenter.native="enterCard (refWord) " />

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

2. el-card<el-tabs @mouseleave.native=" の外側の層にあるすべての el-tabs に Leave イベントを設定します。 LeaveCard()" / >

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

❗️el カードに Leave イベントを設定しないように注意してください。そうしないと、マウスを次の el カードに移動すると、トリミング ボックスが表示されます。がキャンセルされて再生成されるため、ページがちらつく現象が発生します。

4. その他

• スクリーンショットのフレームを画像に制限します: https://github.com/xyxiao001/vue-cropper/issues /429
  解決策: centerBox は true に設定されており、autoCrop=true の場合にのみ有効になります

• プロジェクトはクロップ ボックスの位置情報とサイズを送信する必要があります。背景をトリミングするか OCR を実行しますが、背景に渡された後のトリミングされた画像は常に右下隅にオフセットされます: https://github.com/xyxiao001/vue-cropper/issues/386
  解決策: 画像は拡大縮小されます。はい、位置を渡すときは、position*scale.

• を使用する必要があります。ほとんどの画像のトリミングには問題ありませんが、トリミング時に常にずれが発生します。いくつかの写真: https://github.com /xyxiao001/vue-cropper/issues/439
  解決策: デフォルトのトリミングされた画像サイズには制限があることが判明しました。最大の幅と高さは 2000 ピクセルです。この値を 10000 に設定してください

[推奨関連ビデオ チュートリアル: vuejs エントリ チュートリアル、Web フロントエンドエントリ＃＃＃]＃＃＃

以上がvue-cropper を使用して vue プロジェクト内の画像をトリミングするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。