canvasでダウンロードされるファイル名について

Question

HTML内容がリアルタイムで可変のため、html2canvsでHTML内容を5分単位でダウンロードしていますが、
「ダウンロード」フォルダに以下の許可をしたら、ファイル名に(1).png (2).png (3).pngつきます。

やりたいことは
①ファイル名に日付を設定したら、重複なしで上記のダイアログが出ないのでは？

以下のソースだと、うまくいかないのはなぜでしょうか？

<a href="" id="ss" download="">ダウンロード</a>

<script>
    //ロードされた際の処理として実施：
    window.onload = function(){

      //ボタンを押下した際にダウンロードする画像を作る
      html2canvas(document.body,{
        onrendered: function(canvas){
          //aタグのhrefにキャプチャ画像のURLを設定
          var imgData = canvas.toDataURL();
          document.getElementById("ss").href = imgData;
        }
      });
    window.addEventListener('pageshow', ()=>{
       setInterval(()=>document.getElementById('ss').click( (e) => {
		// data:URLを自身のリンク先として設定すると、このあとダウンロードされる
		const a = e.target;
		a.href = canvas.toDataURL(); // Canvasからdata:URLを取得
		a.download = new Date().getTime() + '.png'; // ダウンロードファイル名はタイムスタンプに設定
	   }),60000);
    });

  </script>

Answer 1

こんにちは。

以下のソースだと、うまくいかないのはなぜでしょうか？

element.click() は引数を取らないと思いますので、引数として渡している関数(e) => {...}はまるっと無視されていると思います。
HTMLElement.click() - Web API | MDN

Comments

[rena_168]

すみません、クリック時にその時のタイムスタンプを引数として渡したいときは、どうしたらいいでしょうか？

[Lhankor_Mhy]

#ss のクリックイベントの中で download 属性を変更すればいいと思います。
おそらく、jQuery の click() と混同しているのでは？
https://api.jquery.com/click/

[rena_168]

document.getElementById("ss").href = imgData;
の下に
document.getElementById("ss")..download = new Date().getTime() + '.png';
を書いてもタイムスタンプのファイル名じゃなかったです。

[Lhankor_Mhy]

そういう書き方をお試しなのですね。
いろいろお考えになるのはいいと思いますよ。

ところで、ドットが重なっているのが気になりますが、これは大丈夫でしょうか？

[rena_168]

すみません、書き間違いでした。
ソース上では問題ないです。
javascriptは奥深くてマスターできないです！

[Lhankor_Mhy]

そうでしたか。
ご提示のコードを試してみましたが、当方の環境では「1615273277990.png」となり、タイプスタンプになっていますね。

[Lhankor_Mhy]

解決しないですか？

一応サンプルを置いておきますね。
https://jsfiddle.net/Lhankor_Mhy/2np4Lfoc/

[rena_168]

サンプルを見ました。
ボタンクリックで、タイムスタンプのファイル名なってるみたいですね。
JSの下に以下のソースを入れたら、1分後の自動クリック度にスタンプファイル名になってますでしょうか？
window.addEventListener('pageshow', ()=>{
setInterval(()=>document.getElementById('ss').click(),60000);
});

[Lhankor_Mhy]

それだと、全部同じファイル名になると思いますよ。

1分後に別のタイムスタンプにしたいのであれば、私のコメント「#ss のクリックイベントの中で download 属性を変更すればいい」を参考にしていただいた方がいいと思います。

[rena_168]

コメントの「#ss のクリックイベントの中で download 属性を変更すればいい」でやってみましたが、
そうなりませんでした＞＜
私の以下のソースに問題がありますでしょうか？
//ボタンを押下した際にダウンロードする画像を作る
html2canvas(document.body,{
onrendered: function(canvas){
//aタグのhrefにキャプチャ画像のURLを設定
var imgData = canvas.toDataURL();
document.getElementById("ss").href = imgData;
　　　 document.getElementById("ss").download = new Date().getTime() + '.png';
}
});

[Lhankor_Mhy]

うーん、なるほど。
そこが「#ss のクリックイベント」だと思っていたのですね。
てっきり、私のアドバイスを無視して、独自の方法で解決しようとしているのかと思っていました。

[Lhankor_Mhy]

#ss に当たるのが、document.getElementById("ss") です。
クリックイベントに当たるのが、 .addEventListener('click', function(){}) です。
'click'と書いてあるから、クリックイベントです。'pageshow'と書いてあったら、ページショーイベントですね。

ですので、こうなります。
https://jsfiddle.net/Lhankor_Mhy/2np4Lfoc/1/

[rena_168]

サンプルありがとうございます！！！
すみません、ちょっと違う質問になって申し訳ないですが、
HTML表示内容が可変ですと、canvas描画による画像出力は無理ですかね？

[rena_168]

すみません、ベストアンサーとさせていただきます！
可変HTMLでのjavascript実行などは、新しく質問したいと思います。