動的に表示される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">１</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">２</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">３</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

行動規範の内容に同意します

回答2件

ベストアンサー

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

総合スコア37413

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を書く) ということですよね？

think49

2021/03/11 01:12

@rena_168 さん https://uhyohyo.net/javascript/ 「第三章　DOMとイベント」を初めから順番に読んで下さい。

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 さんの回答はそういう意味だと思います。確認はいいことですが、試してから結果を書くと更にいいかと。

Lhankor_Mhy

2021/03/11 01:52

>think49さん補足ありがとうございます。以前の質問でのやり取りが下敷きにあります。 https://teratail.com/questions/326671

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

Lhankor_Mhy

2021/03/12 06:34

消しちゃったな……

Lhankor_Mhy

2021/03/12 06:39

追記しました。

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対１でオンラインで教えてもらいたいですね。自分で学習するのは大変です＞＜

Lhankor_Mhy

2021/03/12 06:53

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

rena_168

2021/03/12 08:04

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

Lhankor_Mhy

2021/03/12 08:10

それはよかった。

行動規範の内容に同意します