Vue 画像切り抜きコンポーネントのサンプルコード

npm インストール vue-cropper

糸を追加 vue-cropper

<!-- シンプルな画像切り抜きコンポーネント--- 二次パッケージング-->
<!-- その他の API https://github.com/xyxiao001/vue-cropper -->
<!-- 使用法: 表示または非表示にする画像の比率を渡します。方法: 下部のボタンのクリックをリッスンします --- 自分でプロパティ クエリ ドキュメントを追加します -->

<テンプレート>
  <div v-if="value" :value="value" @input="val => $emit('input', val)" class="conbox">
    <div class="info">
      <vueクロッパー
        ref="クロッパー"
        :img="画像"
        :outputSize="出力サイズ"
        :outputType="出力タイプ"
        :info="情報"
        :canScale="canScale"
        :autoCrop="自動クロップ"
        :fixed="固定"
        :fixedNumber="固定数"
        :full="フル"
        :fixedBox="固定ボックス"
        :canMove="移動可能"
        :canMoveBox="canMoveBox"
        :original="オリジナル"
        :centerBox="センターボックス"
        :infoTrue="情報True"
        :mode="モード"
      </vueクロッパー>
    </div>
    <div class="btns">
      <div @click="clickCancelCut" class="cancel">キャンセル</div>
      <img @click="clickRotate" src="../../assets/paradise/rotate.png" alt="" />
      <div @click="clickOk" class="okey">OK</div>
    </div>
  </div>
</テンプレート>

<スクリプト>
'vue-cropper' から VueCropper をインポートします。
エクスポートデフォルト{
  名前: 'PictureCropping'、
  コンポーネント: { VueCropper },
  小道具: {
    価値： {
      タイプ: ブール値、
      デフォルト: false、
    },
    //画像アドレスをトリミングimg: {
      タイプ: 文字列、
      デフォルト： ''、
    },
    //スクリーンショットフレームのアスペクト比 fixedNumber: {
      タイプ: 配列、
      デフォルト: () => {
        [1, 1]を返します。
      },
    },
  },
  データ（） {
    戻る {
      // クロッピングコンポーネントの基本設定オプション
      : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
  },
  計算: {},
  時計： {}、
  //ライフサイクル - 作成完了（現在の this インスタンスにアクセス）
  作成された() {},
  //ライフサイクル - マウント完了（DOM要素にアクセス）
  マウント() {},
  メソッド: {
    クリックキャンセルカット() {
      this.$emit('clickCancelCut', 'キャンセルするにはクリック');
      this.$refs.cropper.stopCrop();
      this.$refs.cropper.clearCrop();
    },
    クリック回転() {
      this.$refs.cropper.rotateRight();
      this.$emit('clickRotate', 'クリックして回転します');
    },
    クリックOK() {
      //トリミングされたbase64を出力
      this.$refs.cropper.getCropData(データ => {
        this.$emit('clickOk', データ);
        this.$refs.cropper.stopCrop();
        this.$refs.cropper.clearCrop();
      });
    },
  },
};
</スクリプト>
<style lang='less' スコープ>
/* @import url(); CSS クラスをインポート*/
.コンボックス{
  位置: 固定;
  上: 0;
  右: 0;
  下部: 0;
  左: 0;
  ボックスのサイズ: 境界線ボックス;
  高さ：100vh;
  幅: 100%;
  背景色: #000;
  ディスプレイ: フレックス;
  flex-direction: 列;
  コンテンツの中央揃え: 中央;
  。情報 {
    幅: 自動;
    高さ: 800ピクセル;
    .vue-クロッパー{
      背景画像: なし;
      背景色: #000;
    }
  }
  .btns{
    パディング: 0 20px;

    色: #fff;
    テキスト配置: 中央;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    アイテムの位置を中央揃えにします。
    位置: 絶対;
    左: 0;
    右: 0;
    下: 15px;
    画像 {
      幅: 85px;
      高さ: 85px;
    }
    。キャンセル {
      背景色: #606465;
      パディング: 15px 20px;
      幅: 100ピクセル;
      境界線の半径: 10px;
    }
    .オキー{
      背景色: #df6457;
      パディング: 15px 20px;
      幅: 100ピクセル;
      境界線の半径: 10px;
    }
  }
}
</スタイル>