マウスをドラッグしてページのスクリーンショットを撮ります(指定した領域にスクリーンショットをドラッグすることもできます) 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL における制限関数と合計関数の混在使用の問題の詳細な説明
>>: Linux の traceroute コマンドの使用方法の詳細な説明
原理手ぶれ補正の原理は、イベントをトリガーすることはできますが、イベントがトリガーされてから n 秒...
プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...
オプションに属性 selected = "selected" を追加すると、それ...
中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...
現在、インターネット上でウェブサイトをコピーすることは非常に一般的です。では、他人が私たちのウェブサ...
1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...
ブロック要素HTMLタグ分類の詳細* 住所 - 住所* blockquote - ブロック引用* c...
WeChat アプレットの軌跡再生では、主に線描画操作にポリラインを使用し、車の移動操作にマーカーを...
張新旭氏の記事を引用して皆さんにシェアしたいと思います。 変更を加えたい場合は、対応する画像によって...
目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...
具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...
注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...
この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...
MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...
目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...