vue-cropper を使用して vue で写真をトリミングする方法をご存知ですか?

npm インストール vue-cropper 

糸を追加 vue-cropper

'vue-cropper' から VueCropper をインポートします

エクスポートデフォルト{
  コンポーネント:
    ビュークロッパー
  }
}

<vueクロッパー
      ref="クロッパー"
      :img="オプション.img"
      :outputSize="オプションのサイズ"
      :outputType="オプション.outputType"
</vueクロッパー>
    データ（）{
      戻る {
         オプション：{
            img: 'imgUrl', // 画像の URL または base64
            サイズ: 1,
            出力タイプ: 'png',
         }
      }
    }

    // スクリーンショットのbase64データを取得します。this.$refs.cropper.getCropData((data) => {
      // 何かをする
      コンソール.log(データ)
    })
    // スクリーンショットのBLOBデータを取得します。this.$refs.cropper.getCropBlob((data) => {
      // 何かをする
      コンソール.log(データ)
    })

<テンプレート>
  <div>
    <el-dialog title="画像の切り抜き" :visible.sync="表示" append-to-body width="950px" center>
      <div class="cropper-content">
        <div class="cropper-box">
          <div class="cropper">
            <vue-cropper ref = "cropper"：img = "option.img"：outputsize = "option.outputtype =" option.outputtype "：" option.info "：canscale"：canscale "：autocrop =" option.autocrop " 8 "：sixed =" option.fixed "：sixednumber =" option.fixednumber "：full =" option.full "：sixedbox =" option.fixedbox "：canmove =" option.canmove "：canmovebox =" option.canmovebox "：original =" option.original "：centerbox =" opt optionbox "：" height = " ize = "option.maximgsize"：拡大= "option.enlarge"：mode = "option.mode" @realtime = "realtime" @imgload = "imgload">
            </vue-cropper>
          </div>
          <!--下部操作ツールボタン-->
          <div class="footer-btn">
            <div class="scope-btn">
              <label class="btn" for="uploads">画像を選択</label>
              <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="selectImg($event)">
              <el-button size="mini" type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">ズームイン</el-button>
              <el-button size="mini" type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">ズームアウト</el-button>
              <el-button size="mini" type="danger" plain @click="rotateLeft">↺ 左に回転</el-button>
              <el-button size="mini" type="danger" plain @click="rotateRight">↻ 右に回転</el-button>
            </div>
            <div class="アップロード-btn">
              <el-button size="mini" type="success" @click="uploadImg('blob')">画像をアップロード<i class="el-icon-upload"></i></el-button>
            </div>
          </div>
        </div>
        <!--効果画像のプレビュー-->
        <div class="show-preview">
          <div :style="previews.div" class="preview">
            <img :src="previews.url" :style="previews.img">
          </div>
        </div>
      </div>
    </el-ダイアログ>
  </div>
</テンプレート>
<スクリプト>
'vue-cropper' から { VueCropper } をインポートします
エクスポートデフォルト{
  名前: "CropperImage",
  コンポーネント:
    ビュークロッパー
  },
  データ （） {
    戻る {
      表示: this.visible、
      名前: this.Name、
      プレビュー: {},
      オプション： {
        img: '', // 切り抜かれた画像のアドレス outputSize: 1, // 切り抜かれた画像の品質 (オプション 0.1 - 1)
        outputType: 'jpeg', //切り取って画像形式を生成します (jpeg || png || webp)
        : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    };
  },
  小道具: {
    見える：
      タイプ: ブール値、
      デフォルト: false
    },
    名前：
      タイプ: 文字列、
      デフォルト： ''
    }
  },
  時計：
    見える （） {
      this.show = this.visible
    }
  },
  メソッド: {
    // 初期化関数 imgLoad (msg) {
    },
    //画像の拡大縮小 changeScale (num) {
      数値 = 数値 || 1
      this.$refs.cropper.changeScale(数値)
    },
    //左に回転 rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    //右に回転 rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    //リアルタイムプレビュー関数 realTime (data) {
      this.previews = データ
    },
    //画像を選択する selectImg (e) {
      ファイルをe.target.files[0]とします
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
        this.$メッセージ({
          メッセージ: '画像タイプの要件: jpeg、jpg、png'、
          タイプ: 「エラー」
        });
        偽を返す
      }
      //BLOBに変換する
      リーダーを新しいFileReader()にします
      リーダー.onload = (e) => {
        データ
        if (typeof e.target.result === 'object') {
          データ = window.URL.createObjectURL(新しいBlob([e.target.result]))
        } それ以外 {
          データ = e.target.result
        }
        this.option.img = データ
      }
      //base64に変換
      reader.readAsDataURL(ファイル)
    },
    //画像をアップロード uploadImg (type) {
      _this = this とします
      if (type === 'blob') {
        // スクリーンショットのBLOBデータを取得します this.$refs.cropper.getCropBlob(async (data) => {
          formData を新しい FormData() にします。
          formData.append('file', data, new Date().getTime() + '.png')
          // アップロードするには axios を呼び出します let { data: res } = await _this.$http.post(`${msBaseUrl}common-tools-web/file/upload/image`, formData)
          （res.code === 200）の場合{
            _this.$メッセージ({
              メッセージ: res.desc、
              タイプ: 「成功」
            });
            データ = res.result とします
            imgInfo = {
              名前: データ名、
              id: データ.id、
              URL: データ.url
            };
            _this.$emit('uploadImgSuccess', imgInfo);
          } それ以外 {
            _this.$メッセージ({
              メッセージ: 'ファイル サービス異常です。管理者に連絡してください! '、
              タイプ: 「エラー」
            })
          }
        })
      }
    }
  }
}
</スクリプト>
<style スコープ lang="less">
.クロッパーコンテンツ{
  ディスプレイ: フレックス;
  ディスプレイ: -webkit-flex;
  コンテンツの端揃え: flex-end;
  .クロッパーボックス{
    フレックス: 1;
    幅: 100%;
    .クロッパー{
      幅: 自動;
      高さ: 300px;
    }
  }
  .表示プレビュー{
    フレックス: 1;
    -webkit-flex: 1;
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    コンテンツの中央揃え: 中央;
    .プレビュー{
      オーバーフロー: 非表示;
      境界線: 1px実線 #67c23a;
      背景: #cccccc;
    }
  }
}
.footer-btn {
  上マージン: 30px;
  ディスプレイ: フレックス;
  ディスプレイ: -webkit-flex;
  コンテンツの端揃え: flex-end;
  .スコープボタン{
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    コンテンツの両端揃え: スペースの間;
    右パディング: 10px;
  }
  .アップロードボタン{
    フレックス: 1;
    -webkit-flex: 1;
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    コンテンツの中央揃え: 中央;
  }
  .btn{
    アウトライン: なし;
    表示: インラインブロック;
    行の高さ: 1;
    空白: ラップなし;
    カーソル: ポインタ;
    -webkit-appearance: なし;
    テキスト配置: 中央;
    -webkit-box-sizing: 境界線ボックス;
    ボックスのサイズ: 境界線ボックス;
    アウトライン: 0;
    -webkit-transition: 0.1秒;
    遷移: 0.1秒;
    フォントの太さ: 500;
    パディング: 8px 15px;
    フォントサイズ: 12px;
    境界線の半径: 3px;
    色: #fff;
    背景色: #409eff;
    境界線の色: #409eff;
    右マージン: 10px;
  }
}
</スタイル>