画像の自動ダウンロードについて

以下ソースで、ボタンクリックでHTML内容が画像としてダウンロードされますが、画面ロード時に自動的にダウンロードしようと色々試行錯誤しましたが、できませんでした。
どなたかご存じでしょうか？

javascript
1document.getElementById('ss').click();
2document.addEventListener('DOMContentLoaded', function() {
3    // ページが読み込まれたあとに実行される部分
4    document.getElementById('ss').click();
5    alert("aaa");
6});

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>JavaScriptで撮るスクリーンショット</title>
6</head>
7<body>
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    //ロードされた際の処理として実施：
62    window.onload = function(){
63
64      //HTML内に画像を表示
65      html2canvas(document.getElementById("target"),{
66        onrendered: function(canvas){
67          //imgタグのsrcの中に、html2canvasがレンダリングした画像を指定する。
68          var imgData = canvas.toDataURL();
69          document.getElementById("result").src = imgData;
70
71        }
72      });
73
74      //ボタンを押下した際にダウンロードする画像を作る
75      html2canvas(document.body,{
76        onrendered: function(canvas){
77          //aタグのhrefにキャプチャ画像のURLを設定
78          var imgData = canvas.toDataURL();
79          document.getElementById("ss").href = imgData;
80        }
81      });
82    }
83
84  </script>
85
86</body>
87</html>
88

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

回答1件

ベストアンサー

ちょっと時間差をおけばいけるのでは？

javascript
1window.addEventListener('pageshow', ()=>{
2  setTimeout(()=>document.getElementById('ss').click(),500);
3});

投稿2021/02/26 03:52

編集2021/02/26 03:53

yambejp

総合スコア116694

yambejp

2021/02/26 03:54

はたしてそれをやる意味があるかは別次元の話ですが・・・自分のページをキャプチャするだけですから

rena_168

2021/02/26 04:34

自分のページがリアルタイムで変わるので、10分単位で自分の画面をキャプチャしたいです。

yambejp

2021/02/26 04:37

10分毎にキャプチャするならsetIntervalでssをclickしてください

rena_168

2021/02/26 04:41

さすがですね！！！できました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

画像の自動ダウンロードについて

関連した質問