Vueのドラッグスクリーンショット機能を実装する簡単な方法

npm i html2canvas --save // 指定した領域を画像に変換します npm i vue-cropper -S // 画像をトリミングします

'vue-cropper' から VueCropper をインポートします
Vue.use(VueCropper)

  「html2canvas」からhtml2canvasをインポートします
  エクスポートデフォルト{
  }

this.$nextTick(()=>{
   html2canvas(document.body,{}).then(canvas => {    
     dataURL を canvas.toDataURL("image/png") とします。
     this.uploadImg = データURL
     this.loading = true
   });
 })

<テンプレート>
	<div class="pop_alert" v-if="表示">
	   <vueクロッパー
	      @mouseenter.native="入力"
	      @mouseleave.native="離れる"
	      ref="クロッパー"
	      :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 class="btn_box">
	    	<div @click="save">スクリーンショットを確認</div>
	   	    <div @click="close">キャンセル</div>
	    </div>
	 </div>
 </テンプレート>
<スクリプト>
 エクスポートデフォルト{
   データ（）{
       オプション： {
          info: true, // 切り抜きボックスのサイズ情報outputSize: 0.8, // 切り抜かれた画像の品質outputType: "jpeg", // 切り抜かれた画像の形式canScale: false, // 画像がスクロールホイールによる拡大縮小を許可するかどうかautoCrop: false, // デフォルトでスクリーンショットボックスを生成するかどうかfixedBox: false, // 固定スクリーンショットボックスのサイズは変更できないfixed: false, // スクリーンショットボックスの固定アスペクト比を有効にするかどうかfixedNumber: [7, 5], // スクリーンショットボックスのアスペクト比full: true, // スクリーンショットを元のアスペクト比で出力するかどうかcanMove: false, // 元の画像を移動できるかどうかcanMoveBox: true, // スクリーンショットボックスをドラッグできるかどうかoriginal: false, // アップロードされた画像は元のアスペクト比でレンダリングされるcenterBox: false, // スクリーンショットボックスが画像に制限されるかどうかinfoTrue: true // 実際の出力画像の幅と高さを表示するには true、スクリーンショットボックスの幅と高さを表示するには false},
        アップロード画像:"",
        表示:偽
   },
   方法:{
     入力（） {
       if (this.uploadImg == "") {
         戻る;
       }
       this.$refs.cropper.startCrop(); // 切り取りを開始},
     離れる（） {
       this.$refs.cropper.stopCrop();//切り取りを停止},
     save() { //スクリーンショットを確認する this.$refs.cropper.getCropData((data) => { //スクリーンショットのbase64形式のデータを取得する console.log(data)
          this.show = false
        })
        // this.$refs.cropper.getCropBlob(data => { //スクリーンショットのBlob形式のデータを取得します// this.cutImg = data;
        // });
      },
      close(){ //キャンセル this.show = false
      }
   }
 }
 </スクリプト>

<テンプレート>
   <div>
     <div @click="tailoring">カット</div>
	<!--ページの他のコンテンツを書き続けます。Pop_alert はコンポーネントにカプセル化して使用できます -->
	
     <div class="pop_alert" v-if="表示">
	   <vueクロッパー
	      @mouseenter.native="入力"
	      @mouseleave.native="離れる"
	      ref="クロッパー"
	      :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 class="btn_box">
	    	<div @click="save">スクリーンショットを確認</div>
	   	    <div @click="close">キャンセル</div>
	    </div>
	 </div>
   </div>
</テンプレート>
<スクリプト>
「html2canvas」からhtml2canvasをインポートします
 エクスポートデフォルト{
  データ（）{
   戻る {
     オプション： {
          info: true, // 切り抜きボックスのサイズ情報outputSize: 0.8, // 切り抜かれた画像の品質outputType: "jpeg", // 切り抜かれた画像の形式canScale: false, // 画像がスクロールホイールによる拡大縮小を許可するかどうかautoCrop: false, // デフォルトでスクリーンショットボックスを生成するかどうかfixedBox: false, // 固定スクリーンショットボックスのサイズは変更できないfixed: false, // スクリーンショットボックスの固定アスペクト比を有効にするかどうかfixedNumber: [7, 5], // スクリーンショットボックスのアスペクト比full: true, // スクリーンショットを元のアスペクト比で出力するかどうかcanMove: false, // 元の画像を移動できるかどうかcanMoveBox: true, // スクリーンショットボックスをドラッグできるかどうかoriginal: false, // アップロードされた画像は元のアスペクト比でレンダリングされるcenterBox: false, // スクリーンショットボックスが画像に制限されるかどうかinfoTrue: true // 実際の出力画像の幅と高さを表示するには true、スクリーンショットボックスの幅と高さを表示するには false},
        アップロード画像:"",
        表示:偽
   }
  },
  方法:{
    tailoring(){ //これを切り取ります。$nextTick(()=>{
           html2canvas(document.body,{}).then(canvas => {
             dataURL を canvas.toDataURL("image/png") とします。
             this.uploadImg = データURL
             this.show = true
           });
       })
    },
    入力（） {
       if (this.uploadImg == "") {
         戻る;
       }
       this.$refs.cropper.startCrop(); // 切り取りを開始},
     離れる（） {
       this.$refs.cropper.stopCrop();//切り取りを停止},
     save() { //スクリーンショットを確認する this.$refs.cropper.getCropData((data) => { //スクリーンショットのbase64形式のデータを取得する console.log(data)
          this.show = false
        })
        // this.$refs.cropper.getCropBlob(data => { //スクリーンショットのBlob形式のデータを取得します// this.cutImg = data;
        // });
      },
      close(){ //キャンセル this.show = false
      }
   }
 }
</スクリプト>
<スタイル>
	.pop_alert{
      幅: 100%;
	  高さ: 100%;
	  位置: 絶対;
	  上: 0;
	  左: 0;
	  境界線: 1px 破線の赤;
	  背景色: #000000;
    }
    .btn_box{
        位置: 絶対;
	    上: 0;
	    色: 赤;
	    右: 0;
	    フォントサイズ: 30px;
	    ディスプレイ: フレックス;
        アイテムの位置を中央揃えにします。
	    zインデックス: 6666;
    }
</スタイル>