Vue を使用して Web ページのスクリーンショットを撮る方法をご存知ですか?

Vue を使用して Web ページのスクリーンショットを撮る方法をご存知ですか?

1. html2Canvasをインストールする

npm をインストール html2canvas --save

2. 必要なVueコンポーネントを導入する

「html2canvas」からhtml2canvasをインポートします。

3. スクリーンショットボタンを書く

<el-button class="button-dalod" size="mini" title="画像を生成" @click="toImage()" icon="el-icon-download"></el-button>

4. toImage関数を呼び出す

// ページ要素を画像に変換する toImage () {
            // キャンバスタグを手動で作成する const canvas = document.createElement("canvas")
            // 親タグを取得します。つまり、このタグ内の DOM 要素が画像を生成します // imageTofile は、スクリーンショット範囲内の親要素のカスタム参照名です let canvasBox = this.$refs.imageTofile
            // 親の幅と高さを取得します。const width = parseInt(window.getComputedStyle(canvasBox).width)
            定数高さ = parseInt(window.getComputedStyle(canvasBox).height)
            // 幅と高さを2倍に拡大するのは画像がぼやけるのを防ぐためです canvas.width = width * 2
            キャンバスの高さ = 高さ * 2
            canvas.style.width = 幅 + 'px'
            canvas.style.height = 高さ + 'px'
            const コンテキスト = canvas.getContext("2d");
            コンテキスト.スケール(2, 2);
            定数オプション = {
                背景色: null、
                キャンバス: キャンバス、
                CORS の使用: true
            }
            html2canvas(canvasBox, オプション).then((canvas) =​​> {
                // toDataURL 画像形式を base64 に変換
                dataURL = canvas.toDataURL("image/png") とします。
                コンソールログ(データURL)
                this.downloadImage(データURL)
            })
        },
        //画像をダウンロード downloadImage(url) {
            // ウェブページ上にある場合は、直接ダウンロードするための a タグを直接作成できます。let a = document.createElement('a')
            a.href = URL
            a.download = 'ホームスクリーンショット'
            クリック()
        },

スクリーンショット範囲内のページの親に ref 属性を追加することを忘れないでください。これにより、キャンバスは親を見つけて、スクリーンショットを撮るための幅と高さを計算できるようになります。

スクリーンショットの結果は次のとおりです。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue を使用して HTML ページから画像を生成する方法
  • Vue を使用して HTML ページから画像を生成する方法
  • Vueのキャンバスを使ってQRコードと画像ポスターの合成を実現する方法
  • Vue3 で HTML 要素をキャンバス (ポスター生成) に変換して、画像を保存/スクリーンショットする方法

<<:  MySQL における between の境界と範囲の説明

>>:  vscode dockerプラグインのdocker.socket権限問題を解決する

推薦する

HTML フレームセットのサンプルコード

この記事では、Frameset が作成した、できるだけシンプルなフレームワークを紹介します。さて、ま...

CocosCreatorがスキル冷却効果を実装

CocosCreatorがスキルCD効果を実現多くのゲームにはスキルがあります。プレイヤーがスキルボ...

Reactでaxiosを使用してリクエストを送信する一般的な方法

目次Reactにaxios依存関係をインストールして導入するGETリクエストにaxiosを使用するa...

DockerのIDEA構成プロセス

IDEA は Java で最も一般的に使用されている開発ツールであり、Docker は最も人気のある...

Vueはチャットインターフェースを実装する

この記事の例では、チャットインターフェースの表示を実現するためのVueの具体的なコードを参考までに共...

Linux での VMWare15.5 のインストールに関するチュートリアル

Linux に VMWare をインストールするには、公式 Web サイト https://www....

MySQL のタイムスタンプと日付時刻のタイムゾーンの問題によって生じる DTS の落とし穴の詳細な説明

目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...

CSS ファンタスティックボーダーアニメーション効果の実装

今日、私はブログサイト shoptalkshow を閲覧していて、非常に興味深いこのインターフェース...

CentOSバージョンにDockerをインストールする際のエラーの解決方法

1. バージョン情報 # cat /etc/system-release CentOS Linux ...

JavaScript における継承の 3 つの方法

継承する1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはあ...

CSSアニメーションがJSによってブロックされるかどうかについての簡単な議論

CSS のアニメーション部分は JS によってブロックされますが、transform のアニメーショ...

uniapp プロジェクトの最適化方法と提案

目次1. 複雑なページデータ領域をコンポーネントにカプセル化する2. 大きな画像の使用を避ける3. ...

Vueは不規則なスクリーンショットを実装する

目次SVG による画像キャプチャCSS部分エフェクト画像表示ソースコードアドレスこれまで見てきたもの...

iframe src 割り当ての問題 (サーバー側)

今日この問題に遭遇しました。サーバー側でiframeのsrc値を再割り当てし、iframeにIDを追...

dockerを使用してGrafana+Prometheus構成をデプロイする

docker-compose-monitor.yml バージョン: '2' ネットワ...