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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL における between の境界と範囲の説明
>>: vscode dockerプラグインのdocker.socket権限問題を解決する
この記事では、Frameset が作成した、できるだけシンプルなフレームワークを紹介します。さて、ま...
CocosCreatorがスキルCD効果を実現多くのゲームにはスキルがあります。プレイヤーがスキルボ...
目次Reactにaxios依存関係をインストールして導入するGETリクエストにaxiosを使用するa...
IDEA は Java で最も一般的に使用されている開発ツールであり、Docker は最も人気のある...
この記事の例では、チャットインターフェースの表示を実現するためのVueの具体的なコードを参考までに共...
Linux に VMWare をインストールするには、公式 Web サイト https://www....
目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...
今日、私はブログサイト shoptalkshow を閲覧していて、非常に興味深いこのインターフェース...
1. バージョン情報 # cat /etc/system-release CentOS Linux ...
継承する1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはあ...
CSS のアニメーション部分は JS によってブロックされますが、transform のアニメーショ...
目次1. 複雑なページデータ領域をコンポーネントにカプセル化する2. 大きな画像の使用を避ける3. ...
目次SVG による画像キャプチャCSS部分エフェクト画像表示ソースコードアドレスこれまで見てきたもの...
今日この問題に遭遇しました。サーバー側でiframeのsrc値を再割り当てし、iframeにIDを追...
docker-compose-monitor.yml バージョン: '2' ネットワ...