Vueはプラグインを使用して画像を比例してカットします

データ（）{
 戻る {
     フォームデータ:{
        現在のバナー画像:""
     },
     isShowCropper :false、
 }
}
<el-アップロード
      クラス="アバターアップローダー"
      リストタイプ="絵カード"
      アクション=""
      accept=".jpg、.jpeg、.png"
      :資格情報あり="true"
      :on-change="ファイル変更バナー"
      :自動アップロード="false"
      :ファイルリストを表示="false"
    >
    <div class="imgBoX">
        <img class="bannerImg" v-if="formData.currentBannerImg" title="クリックして変更" :src="formData.currentBannerImg" alt="" />
        <i class="el-icon-delete delImg" v-if="formData.currentBannerImg" title="削除"></i>
        <i v-if="!formData.currentBannerImg" slot="default" class="el-icon-plus"></i>
      </div>
      <div slot="tip" class="el-upload__tip">アップロードできるのは jpg、jpeg、png のみで、1 つのファイルのサイズは 10 MB を超えることはできません</div>
</el-アップロード>

// 画像をアップロードし、成功したらトリミングします async fileChangeBanner(file, fileList) {
      定数 fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      const fileTypeArr = ["jpg", "jpeg", "png", "JPG", "JPEG", "PNG"];
      (fileTypeArr.indexOf(fileType) < 0) の場合 {
        this.$alert("jpg、jpeg、またはpng形式の画像をアップロードしてください!"、"システムプロンプト", {
          confirmButtonText: 「確認」
        });
        ファイルリストを連結します(ファイルリストの長さ - 1);
        戻る;
      }
      // サイズ制限 const isLt2M = file.size / 1024 / 1024 < this.$FileSize;
      もし (!isLt2M) {
        this.$alert(`アップロードされたファイルのサイズは ${this.$FileSize}MB を超えることはできません!`, "システムプロンプト", {
          confirmButtonText: 「確認」
        });
        ファイルリストを連結します(ファイルリストの長さ - 1);
        戻る;
      }
      // 切り抜き部分を追加します this.isShowCropper = true;
      this.$nextTick(() => {
        this.$refs.vueCropperDialog.open(ファイル);
      });
    },

<vueCropperDialog @cutImgEnter="cutImgEnter" v-if="isShowCropper" ref="vueCropperDialog"></vueCropperDialog>

<!-- -->
<テンプレート>
  <!-- vueCropper による画像の切り取りの実装 -->
  <el-dialog title="画像の切り抜き" :visible.sync="dialogVisible" append-to-body>
    <div class="cropper-content">
      <div class="cropper" style="text-align:center">
        <vueクロッパー
          ref="クロッパー"
          :img="オプション.img"
          :outputSize="オプションのサイズ"
          :outputType="オプション.outputType"
          :info="true"
          :full="オプション.full"
          :canMove="オプション.canMove"
          :canMoveBox="オプション.canMoveBox"
          :original="オプション.original"
          :autoCrop="オプション.autoCrop"
          :fixed="オプション.fixed"
          :fixedNumber="オプション.fixedNumber"
          :centerBox="オプション.centerBox"
          :infoTrue="オプション.infoTrue"
          :fixedBox="オプション.fixedBox"
        </vueクロッパー>
      </div>
    </div>
    <div スロット="フッター" クラス="ダイアログ フッター btnBox">
      <div>
        <el-button icon="el-icon-refresh-left" @click="turnLeftOrRight('left')">左に回転</el-button>
        <el-button icon="el-icon-refresh-right" @click="turnLeftOrRight('right')">右に回転</el-button>
      </div>
      <div>
        <el-button @click="dialogVisible = false">キャンセル</el-button>
        <el-button type="primary" @click="finish" :loading="loading">確認</el-button>
      </div>
    </div>
  </el-ダイアログ>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      ファイル情報:"",
      ダイアログ表示: false、
      // クロッピングコンポーネントの基本設定オプション
      オプション： {
        : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
      picsList: [], // ページに表示される配列 // 重複した送信を防ぐ loading: false
    };
  },
  メソッド: {
    開く(ファイル) {
      this.fileinfo = ファイル;
      this.option.img = ファイル.url;
      this.dialogVisible = true;
    },
    blobToFile(Blob、ファイル) {
      const files = new window.File([theBlob], file.name, { type: theBlob.type });
      ファイルを返します。
    },
    //左回転 turnLeftOrRight(type) {
      if (type == "左") {
        this.$refs.cropper.rotateLeft();
      } それ以外 {
        this.$refs.cropper.rotateRight();
      }
    },
    // クリックして切り取ります。このステップは処理されたアドレスを取得することです。finish() {
      this.$refs.cropper.getCropBlob((データ) => {
        this.loading = true;
        const changeFile = this.blobToFile(data, this.fileinfo);
        const fileUrl = window.URL.createObjectURL(データ);
        // 切り取りが成功した後のコールバック。$emit("cutImgEnter", changeFile, fielUrl);
        this.loading = false;
        this.dialogVisible = false;
      });
    }
  }
};
</スクリプト>
<style lang="scss" スコープ>
// スクリーンショット.cropper-content {
  .クロッパー{
    幅: 自動;
    高さ: 300px;
  }
}
.btnボックス{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
}
</スタイル>