VUE-CLIプロジェクトはVUE-クロッパープラグイン実装の傍受の写真を使用しています

要件：あなたがアップロードする画像は、画像の大きさを規定する要件をアップロードし、その画像のトリミング

インストール

npm install vue-cropper

main.jsで導入

import vueCropper from 'vue-cropper' // 截图插件

Vue.use(vueCropper)

使用するコンポーネント

<template>
  <!-- 截图插件的容器 -->
  <div class="cropper-container">
    <div :class="(fade == 'in'?'fadeIn':'fadeOut')">
      <img src="@/assets/close.png" @click="close('cancel')" />
      <h2>编辑头像</h2>
      <vueCropper
        :img="previewImg"
        :autoCrop="true"
        :canScale="true"
        :canMove="false"
        :fixedBox="true"
        :autoCropWidth="200"
        :autoCropHeight="200"
        :enlarge="3"
        class="cropper"
        ref="cropper"
      ></vueCropper>
      <button @click="confirm">确定</button>
    </div>
  </div>
</template>



    //确认截图，并把生成的base64传到后台
    confirm() {
      this.$refs.cropper.getCropData(data => {
        this.close(data);
      });
    },

手動で幅と高さ、ネイティブの高さを設定する<VueCropper> </ vueCropper>必要0

背景ネイティブグリッド背景が灰色と白色である、CSSネイティブ背景を変更するために使用することができます

    .cropper {
      width: 260px;
      height: 260px;
    }

    .cropper > :nth-child(1) {
      background-color: #f6f6f6 !important;
    }

次のような効果があります

個人的な感情は非常に使いやすいです、統合文法VUEは、足場のプロジェクトまでの構成が非常に便利です。

公式ウェブサイトのアドレス：https://github.com/xyxiao001/vue-cropper