質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1494閲覧

可変のHTML画面表示後のjavascript実行について

rena_168

総合スコア72

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/03/10 10:30

編集2021/03/11 03:37

動的に表示されるHTML画面が全表示されてから、そのHTMLを画像として自動ダウンロードしたいですが、
私のソースだと、表示前の画面の画像になります。

javascriptのsetTimeout実行を全画面表示されてから実行してほしいときは、書き方の前後関係などを
教えていただけますでしょうか。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>JavaScriptで撮るスクリーンショット</title> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 7</head> 8<body> 9<div id="draw" style="overflow-y:auto;" class="ll"> 10<a href="" id="ss" download="download.png" style="visibility:visible">ダウンロード</a> 11Loading.. 12</div> 13</body> 14</html> 15<script language="javascript"> 16//動的にHTMLを生成している処理 17function draw(){ 18 $("#draw").html(tmp); 19} 20 //ロードされた際の処理として実施: 21 window.onload = function(){ 22 23 24 //ボタンを押下した際にダウンロードする画像を作る 25 html2canvas(document.body,{ 26 onrendered: function(canvas){ 27 //aタグのhrefにキャプチャ画像のURLを設定 28 var imgData = canvas.toDataURL(); 29 document.getElementById("ss").href = imgData; 30 } 31 }); 32 } 33window.addEventListener('pageshow', ()=>{ 34 setTimeout(()=>document.getElementById('ss').click(),60000); 35}); 36</script> 37 38 39

修正後のコードは、以下のようになりますが、onrenderedの中身が実行されないです><

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>JavaScriptで撮るスクリーンショット</title> 6</head> 7<body onpageshow="console.log('onpageshow')"> 8 9 <hr> 10 <div style="background-color : #AAEEDD"><h1>JavaScriptで撮るスクリーンショット</h1></div> 11 <div id="target"> 12 <h2>導入方法と処理概要</h2> 13 <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout: fixed;"> 14 <tr> 15 <th bgcolor="#7b9ad0" width="40"><font color="#FFFFFF">No</font></th> 16 <th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">概要</font></th> 17 <th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">補足</font></th> 18 </tr> 19 <tr> 20 <td bgcolor="#b1d7e4" width="40" align="right">1</td> 21 <td bgcolor="#FFFFFF" width="230" >html2canvas.jsを読み込む</td> 22 <td bgcolor="#FFFFFF" width="230" ></td> 23 </tr> 24 <tr> 25 <td bgcolor="#b1d7e4" width="40" align="right">2</td> 26 <td bgcolor="#FFFFFF" width="230" >任意のタイミングでhtml2canvas関数を呼ぶ</td> 27 <td bgcolor="#FFFFFF" width="230" >※今回はオンロード処理</td> 28 </tr> 29 <tr> 30 <td bgcolor="#b1d7e4" width="40" align="right">3</td> 31 <td bgcolor="#FFFFFF" width="230" >onrendered 処理にて指定のElementに画像を追記</td> 32 <td bgcolor="#FFFFFF" width="230" >※[img]タグの[src]や、[a]タグの[href]など</td> 33 </tr> 34 </table> 35 </div> 36 <br> 37 <hr> 38 <h3>↓↓ここから画像↓↓ (上の対象のDIVを画像化)<h3> 39 <img src="" id="result" /> 40 <h3>↑↑ここまで画像↑↑</h3> 41 42 <hr> 43 44 <a href="" id="ss" download="html_ss.png">スクリーンショット(document.body全体)をダウンロード</a> 45 46 <hr> 47 <h3>注意</h3> 48 <ul> 49 <li>実際にはスクリーンショットを撮っているわけではない</li> 50 <li>html2canvasは、HTML内のDOMやCSSを解釈してCanvas上に描画するライブラリ</li> 51 <li>つまり、レンダリングエンジンに近い動作をする</li> 52 <li>そのため、ブラウザと異なる表示がされる場合がある</li> 53 <li>flashやapplet,iframe(別URL)はうまくキャプチャできない</li> 54 </ul> 55 </div> 56 57 58 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 59 <script> 60 61 const savepng = () => { 62 //ボタンを押下した際にダウンロードする画像を作る 63 html2canvas(document.body, { 64 onrendered: function (canvas) { 65 //aタグのhrefにキャプチャ画像のURLを設定 66 var imgData = canvas.toDataURL(); 67 document.getElementById("ss").href = imgData; 68   document.getElementById("ss").download = new Date().getTime() + '.png'; 69 } 70 }); 71 72 73document.getElementById('ss').click(); 74 } 75document.getElementById("ss").addEventListener('click', function(){ 76console.log('OK'); 77}); 78 79window.addEventListener('pageshow', ()=>{ 80setInterval(savepng,60000); 81}); 82 </script> 83 84</body> 85</html> 86

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

html2canvasをクリックイベントの中で実行するのがいいと思います。

コメントを受けて追記

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>JavaScriptで撮るスクリーンショット</title> 7</head> 8 9<body onpageshow="console.log('onpageshow')"> 10 11 <hr> 12 <div style="background-color : #AAEEDD"> 13 <h1>JavaScriptで撮るスクリーンショット</h1> 14 </div> 15 <div id="target"> 16 <h2>導入方法と処理概要</h2> 17 <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout: fixed;"> 18 <tr> 19 <th bgcolor="#7b9ad0" width="40"> 20 <font color="#FFFFFF">No</font> 21 </th> 22 <th bgcolor="#7b9ad0" width="230"> 23 <font color="#FFFFFF">概要</font> 24 </th> 25 <th bgcolor="#7b9ad0" width="230"> 26 <font color="#FFFFFF">補足</font> 27 </th> 28 </tr> 29 <tr> 30 <td bgcolor="#b1d7e4" width="40" align="right"></td> 31 <td bgcolor="#FFFFFF" width="230">html2canvas.jsを読み込む</td> 32 <td bgcolor="#FFFFFF" width="230"></td> 33 </tr> 34 <tr> 35 <td bgcolor="#b1d7e4" width="40" align="right"></td> 36 <td bgcolor="#FFFFFF" width="230">任意のタイミングでhtml2canvas関数を呼ぶ</td> 37 <td bgcolor="#FFFFFF" width="230">※今回はオンロード処理</td> 38 </tr> 39 <tr> 40 <td bgcolor="#b1d7e4" width="40" align="right"></td> 41 <td bgcolor="#FFFFFF" width="230">onrendered 処理にて指定のElementに画像を追記</td> 42 <td bgcolor="#FFFFFF" width="230">※[img]タグの[src]や、[a]タグの[href]など</td> 43 </tr> 44 </table> 45 </div> 46 <br> 47 <hr> 48 <h3>↓↓ここから画像↓↓ (上の対象のDIVを画像化)<h3> 49 <img src="" id="result" /> 50 <h3>↑↑ここまで画像↑↑</h3> 51 52 <hr> 53 54 <a href="" id="ss" download="html_ss.png">スクリーンショット(document.body全体)をダウンロード</a> 55 56 <hr> 57 <h3>注意</h3> 58 <ul> 59 <li>実際にはスクリーンショットを撮っているわけではない</li> 60 <li>html2canvasは、HTML内のDOMやCSSを解釈してCanvas上に描画するライブラリ</li> 61 <li>つまり、レンダリングエンジンに近い動作をする</li> 62 <li>そのため、ブラウザと異なる表示がされる場合がある</li> 63 <li>flashやapplet,iframe(別URL)はうまくキャプチャできない</li> 64 </ul> 65 </div> 66 67 68 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 69 <script> 70 71 const savepng = () => { 72 //ボタンを押下した際にダウンロードする画像を作る 73 html2canvas(document.body, { 74 onrendered: function (canvas) { 75 //aタグのhrefにキャプチャ画像のURLを設定 76 var imgData = canvas.toDataURL(); 77 document.getElementById("ss").href = imgData; 78 document.getElementById("ss").download = new Date().getTime() + '.png'; 79 document.getElementById('ss').click(); 80 } 81 }); 82 83 84 } 85 document.getElementById("ss").addEventListener('click', function () { 86 console.log('OK'); 87 }); 88 89 window.addEventListener('pageshow', () => { 90 setInterval(savepng, 60000); 91 }); 92 </script> 93 94</body> 95 96</html>

投稿2021/03/11 00:45

編集2021/03/12 06:39
Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rena_168

2021/03/11 00:55

すみません、意味がよくわかりません><こういうことでしょうか? window.addEventListener('pageshow', ()=>{ setTimeout(()=>document.getElementById('ss').click(),60000); html2canvas(document.body,{ onrendered: function(canvas){ //aタグのhrefにキャプチャ画像のURLを設定 var imgData = canvas.toDataURL(); document.getElementById("ss").href = imgData; } }); });
Lhankor_Mhy

2021/03/11 00:57

繰り返しになりますが、'click'と書いてあるのが、クリックイベントです。'pageshow'と書いてあったら、ページショーイベントですね。
rena_168

2021/03/11 01:04

失礼しました。 document.getElementById('ss').click(この中にhtml2canvasを書く) ということですよね?
rena_168

2021/03/11 01:24

ちょっと基礎ができてないです>< なんか書きたいときだけ、調べて書いてるから身につかないでしょうね! あぁ。。。
rena_168

2021/03/11 01:30

わかりました! document.getElementById('ss').addEventListener('click', aaa, false) でaaaの中に html2canvas(document.body,{ onrendered: function(canvas){ //aタグのhrefにキャプチャ画像のURLを設定 var imgData = canvas.toDataURL(); document.getElementById("ss").href = imgData; } }); を実行させたらいいことですね?
think49

2021/03/11 01:42

@rena_168 さん @Lhankor_Mhy さんの回答はそういう意味だと思います。 確認はいいことですが、試してから結果を書くと更にいいかと。
rena_168

2021/03/11 02:18

@Lhankor_Mhyさんのクリックイベントの書き方はわかりました。クリックは問題ありません! しかし、問題がwindow.onload実行時のdocument.bodyの中身が学校全員取得後の結果でなく、「Loading..」データだけでした。 全員名がbodyに乗っかってから(draw関数実行後)、html2canvas描画をしたいです。
Lhankor_Mhy

2021/03/11 02:28

ご提示のコードの draw 関数は、どこからも呼び出されていませんので実行されませんよ。 というツッコミは置いておいて。 前回の質問から類推するに、このページは定期的に動的な変化をするので、5分ごとのスクリーンショット的なことをしたい、ということだと思います。 そのために setInterval を使って定期的にクリックをするようにしているのですから、じゃあ、そのクリックを拾って、番たびにhtml2canvasを動かせばいいんじゃないのかな? というのが私の回答です。 もし、「クリックイベントってなに?」という話でしたら、以下を読んでみてください。 https://qiita.com/tsukishimaao/items/b1d12eb4c34abcf31d3a もっとわかりやすく書くならば、「仕事中に電話がかかってきたら、仕事を中断して電話に出て、対応が終わったら中断していた仕事に戻ると思います。それがイベント処理です。」みたいな感じでしょうか。
Lhankor_Mhy

2021/03/11 02:31

と思いましたが、よく考えるとこれではダメですね。 ① setIntervalの中でhtml2canvasを動かす ② onrenderedの中でクリックを動作させる これがいいと思います。
rena_168

2021/03/11 02:42

Lhankor_Mhyさん、アドバイスありがとうございます。 ちょっとやってみます! 出入りが頻繁ですから一定時間単位で画面描画での画像保存です。 私には難しいです!
Lhankor_Mhy

2021/03/11 02:54

わかりました。 つまづいたところがあれば、コメントでお知らせください。
rena_168

2021/03/11 04:16

@Lhankor_Mhy先輩 上記に修正コードを記載しました。 onrenderedの中が実行されなかったです!
Lhankor_Mhy

2021/03/11 04:36

document.getElementById('ss').click(); を onrendered の中に入れてみてください。
Lhankor_Mhy

2021/03/12 04:09

大丈夫でしょうかー?
rena_168

2021/03/12 06:13

いいえ、ダメでした>< 色々工夫してますが、無理ですかね???
Lhankor_Mhy

2021/03/12 06:16

当方の環境では、document.getElementById('ss').click(); を onrendered の中に入れれば、動作していますよ。 ダメ、とは具体的にはどういう問題が発生していますか?
Lhankor_Mhy

2021/03/12 06:17 編集

ちなみに、中に入れる、とは末尾に追加する、という意味です。 document.getElementById("ss").download = new Date().getTime() + '.png'; document.getElementById('ss').click(); } こんな感じ。
rena_168

2021/03/12 06:19

ChromeのF12でデバッグすると、画面読み込む前にwindow.onloadの中に入り、html2canvas.jsのdocument.bodyの中身がundefineでした。
Lhankor_Mhy

2021/03/12 06:23

ご提示いただいた「修正後のコード」には、そもそも window.onload がないと思うんですよね…… どうも、お互いに見ているコードが違うようですので、すり合わせが必要では?
rena_168

2021/03/12 06:25

私のHTML構造は</html>後に<script記載の中に記載しています。 すみません、サンプルソースを見せていただけますでしょうか?
Lhankor_Mhy

2021/03/12 06:31

> </html>後に<script記載の中に記載しています それ、おもいくそ文法違反…… > すみません、サンプルソースを見せていただけますでしょうか? それ、おもいくそ丸投げ質問…… ちょっとお待ちください。
rena_168

2021/03/12 06:43

すみません、初歩的な質問をしたいのですが、 大きな固まりは<html></html><script></script>で 2個目の<script>は動的内容取得の処理ですが、<html>内に<script>を書いて、動的読み込み後<html>内の<script>でhtml2canvas描画のjavascriptを実行させることは可能でしょうか?
rena_168

2021/03/12 06:46

@Lhankor_Mhy先輩 javascriptについて、1対1でオンラインで教えてもらいたいですね。 自分で学習するのは大変です><
Lhankor_Mhy

2021/03/12 06:53

> 動的読み込み後<html>内の<script>でhtml2canvas描画のjavascriptを実行させることは可能でしょうか? 質問の内容を理解できているかどうかわかりませんが、できるんじゃないかと思います。追記したソースはそうなっているように思います。 > 1対1でオンラインで教えてもらいたい 本気なら MENTA とか利用されたらいかがです?
rena_168

2021/03/12 08:04

@Lhankor_Mhy先輩 できました!!!ありがとうございます。 MENTAとか初めて聞きますが、今後利用したいと思います。
guest

0

こまかく見てないので当てずっぽうですが
pageshowイベントのコールバックで実行してみては?

投稿2021/03/10 10:42

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rena_168

2021/03/10 12:18

すみません、サンプルとして参考になるソースはありますでしょうか? ネットで調べていますが、なかなか見つかっていないです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問