Vueのウェブページスクリーンショット機能の詳しい説明

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

 Vue.use(VueCropper)

 <div>
            <span class="spanStyle">製品画像:</span>
            <!--画像プレビュー div 全体-->
            <div style="display:flex;padding-left: 300px;">
              <div class="info-item" style="flex:1;margin-left:-160px;margin-top: -25px">
                <label class="btn btn-orange theme-bg-gray theme-white w90" for="uploads" style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;" >画像を選択</label>
                <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
                <div class="line" style="margin-left: -280px;margin-top: 85px;">
                  <div class="cropper-content" style="margin-top:-60px;margin-left:160px;">
                    <div class="cropper">
                      <vueクロッパー
                        ref="クロッパー"
                        :img="オプション.img"
                        :outputSize="オプションのサイズ"
                        :outputType="オプション.outputType"
                        :info="true"
                        :full="オプション.full"
                        :canMove="オプション.canMove"
                        :canMoveBox="オプション.canMoveBox"
                        :original="オプション.original"
                        :autoCrop="オプション.autoCrop"
                        :autoCropWidth="option.autoCropWidth"
                        :autoCropHeight="option.autoCropHeight"
                        :fixedBox="オプション.fixedBox"
                        @realTime="実時間"
                      </vueクロッパー>
                    </div>
                    <!-- キャプチャした画像は div 内に表示されます -->
                    <div style="margin-left:700px;">
                      <div class="show-preview" :style="{'width': '300px', 'height':'150px', 'overflow': 'hidden', 'margin-left': '-650px'}">
                        <div :style="previews.div" >
                          <img :src="previews.url" :style="previews.img">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

データ （）{
	戻る {
		 ヘッドイメージ:''、
                //画像を切り取ってアップロードする: false,
                プレビュー: {},
                オプション： {
                    画像: ''、
                    outputSize:1, //カット後の画質（0.1-1）
                    full: false, // 元の画像スケールのスクリーンショットを出力 props name full
                    出力タイプ: 'png',
                    移動可能: true、
                    オリジナル: 偽、
                    canMoveBox: true、
                    自動トリミング: true、
                    自動クロップ幅: 300,
                    自動クロップ高さ: 150,
                    固定ボックス: true
                },
                fileName:'', //ローカルファイルアドレス downImg: '#',
                画像ファイル:'',
                uploadImgRelaPath:'', //アップロードされた画像のアドレス（サーバードメイン名なし）
	}
},
方法:{
	// リアルタイムプレビュー関数 realTime(data) {
       コンソールログ('リアルタイム')
       this.previews = データ
   },
   //ローカル画像を選択 uploadImg(e, num) {
       コンソールにログを出力します。
       var _this = これ;
       // 画像をアップロード var file = e.target.files[0]
       _this.fileName = ファイル名;
       if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
           alert('画像タイプは .gif、jpeg、jpg、png、bmp のいずれかである必要があります')
           偽を返す
       }
       var リーダー = 新しい FileReader();
       リーダー.onload = (e) => {
           データを入力します。
           if (typeof e.target.result === 'object') {
               // 配列バッファを BLOB に変換します。base64 の場合は必要ありません。data = window.URL.createObjectURL(new Blob([e.target.result]))
           }
           それ以外 {
               データ = e.target.result
           }
           数値 === 1 の場合
               _this.option.img = データ
           } そうでなければ (num === 2) {
               _this.example2.img = データ
           }
       }
       // // blob に変換
       reader.readAsArrayBuffer(ファイル);
   }
}
 

製品追加(){
this.$refs.cropper.getCropBlob((データ) => {
	  //このデータは、私たちが傍受した BLOB 画像です。let formData = new FormData();
	  //ファイル名を取得します。ファイル変換ではこれを使用できないため、変数を使用して割り当てる必要があります。var name=this.fileName
       var file = new File([data], name, {type: data.type, lastModified: Date.now()});
       formData.append("ファイル",ファイル)
       新しい Promise((resolve, 拒否) => {
           productAdd(formData).then(レスポンス => {
               （レスポンスコード == 20000）の場合{
                   ダイアログ.アラート({
                       タイトル: 「ヒント」
                       メッセージ: '正常に保存されました! '
                   }).then(() => {
                       this.back('/productInfo')
                   });

               }
           }).catch(エラー => {
               拒否(エラー)
           })
       })
   })
}