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

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

マウスをドラッグしてページのスクリーンショットを撮ります(指定した領域にスクリーンショットをドラッグすることもできます)

1. html2canvasとvue-cropperをインストールする

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

2. main.jsにvue-cropperコンポーネントを登録する

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

3. ページにhtml2canvasを導入する

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

4. コードの分解

1. 指定した領域を画像に変換する

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

ここでは、本文ページ全体を画像に変換してbase64形式のデータを取得し、その他の領域はクラスまたはIDを直接取得します。

2. 生成された画像をドラッグしてスクリーンショットを撮ります

<テンプレート>
	<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
      }
   }
 }
 </スクリプト>

5. すべてのコード

<テンプレート>
   <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;
    }
</スタイル>

レンダリング

要約する

Vue ドラッグ スクリーンショット機能の実装に関するこの記事はこれで終わりです。Vue ドラッグ スクリーンショット機能に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueをベースにドラッグ効果を実現
  • Vue ベースのドラッグ アンド ドロップ機能を実装する
  • Vue.js でドラッグ アンド ドロップ効果を実装する例
  • Vue.js は画像のランダムドラッグを実装します
  • Vueはdivドラッグアンドドロップを実装します
  • Vue カスタム ディレクティブ ドラッグ関数の例
  • Vueは不規則なスクリーンショットを実装する

<<:  MySQL における制限関数と合計関数の混在使用の問題の詳細な説明

>>:  Linux の traceroute コマンドの使用方法の詳細な説明

推薦する

JavaScript 手ぶれ補正のケーススタディ

原理手ぶれ補正の原理は、イベントをトリガーすることはできますが、イベントがトリガーされてから n 秒...

jsの継承の6つの方法を詳しく解説

プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...

HTML 選択オプション デフォルトの選択方法

オプションに属性 selected = "selected" を追加すると、それ...

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 1)

中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...

他の人が私のウェブページを保存したり、サイトをコピーしたりするのを防ぐためのヒント

現在、インターネット上でウェブサイトをコピーすることは非常に一般的です。では、他人が私たちのウェブサ...

CSS でフロートをクリアするための完全ガイド (要約)

1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...

よく使われるHTMLタグのインライン要素とブロックレベル要素の詳細な説明

ブロック要素HTMLタグ分類の詳細* 住所 - 住所* blockquote - ブロック引用* c...

WeChatアプレットトラック再生の実装と遭遇した落とし穴の詳細な説明

WeChat アプレットの軌跡再生では、主に線描画操作にポリラインを使用し、車の移動操作にマーカーを...

CSS フレックスレイアウトのリストの最後の行を左揃えにする N 通りの方法 (要約)

張新旭氏の記事を引用して皆さんにシェアしたいと思います。 変更を加えたい場合は、対応する画像によって...

Sparkの紹介とHadoopとの比較

目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...

MySQLでユーザー認証情報を表示する具体的な方法

具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...

入力選択スタイルを変更する CSS 疑似クラスのサンプルコード

注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...

スキン効果を実現するJavaScript(背景の変更)

この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

MySQL パフォーマンス最適化のヒント

MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...

Dapr を使用してマイクロサービスをゼロから簡素化する例

目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...