JavaScript,JQueryでQRコードを複数生成し一括ダウンロードしたい

Question

前提・実現したいこと

クライアントサイドでQRコードを複数生成し、pngファイルにしてzipでまとめてダウンロードしたいです。
ブラウザはchromeです。

発生している問題

こちらの記事を参考にしてQRコードの生成、zipの保存まではできたのですが、中身のファイルがpngになりません。
https://memo.appri.me/programming/qrcode-read-write
https://r17n.page/2020/01/12/js-download-zipped-images-to-local/

該当のソースコード

具体的にはチェックボックス選択→ボタンクリックで、チェックボックスのvalueの文字列をQRコードとして出力しています。

<div style="display: none;" id="imgField"></div>

    function createQrcode() {
			$('input:checkbox[name="hoge"]:checked').each(function() {
				qr_text = $(this).val();
				QRCode.toDataURL(qr_text, function(err, dataurl) {
					if (err) {
						alert(err.message);
						return;
					}
								
					$('#imgField').append('<img name="qr_code" src="'+dataurl+'">');
				});
				qr_text = '';
			});
			downloadImages();
    }

downloadImages()からはほとんど2つ目の記事のソースコードを使わせていただきました。

試したこと

試しにdivのdisplay:noneを外したところ、QRコードが問題なく表示されました。（右クリックで保存もできます）
zipで保存されたファイルも、ブラウザで開けばQRコードが表示されました。

ダウンロードの機能を作るのが初めてなので認識間違い等あるかもしれません。
何か良い方法があればご教授いただきたいです。よろしくお願い致します。

Comments

[Lhankor_Mhy]

「中身のファイルがpngになりません」とは、具体的には何が起きていますか？　「zipで保存されたファイルも、ブラウザで開けばQRコードが表示されました」とのことですが、それはPNGになっているということではないのですか？

[onakahetta]

言葉が足りず申し訳ありません。ダウンロードしたファイルが拡張子.pngの画像ファイルであってほしいのですが、恐らくテキストファイルのようなもので保存されてしまっているのです。プロパティで見ても「ファイルの種類:ファイル」となっています。

[Lhankor_Mhy]

ファイル名が問題、ということでしょうか？

[onakahetta]

ファイル名の問題なのか、どこかで変換する必要があるのか、それも現状よく分かっておりません...。imgタグを生成する段階でdataurlに.pngを付けるようにしたり試してみましたが、画像が表示されなくなりました。

[Lhankor_Mhy]

適切にファイル名をつければ解決する問題のように思えるのですが、どこで問題が発生していますか？
ファイル名のつけ方がわからない、ということでしょうか？

[onakahetta]

はい。

[Lhankor_Mhy]

folder.file(image.fileName, image.data)
↑ここでファイル名をつけているので、適当に命名すればいいと思います。

[onakahetta]

.pngつけて命名したところ、求めていたことができました！本当にありがとうございます！
ベストアンサーにしたいので、お手数ですが回答の方にも書いていただけますでしょうか？

[Lhankor_Mhy]

ご解決されて何よりです。

お手数おかけしますが、自己解決でお願いしてよろしいでしょうか。

[onakahetta]

承知致しました。お時間頂きありがとうございました。

Answer 1

downloadImages()内のファイル名を指定する箇所で.pngをつけて命名したところ、pngファイルとして保存することができました。
Lhankor_Mhyさん、解決方法のご提示ありがとうございました。

Answer 2

ドキュメントを見たところ、QRCode.toDataURL()は非同期処理のようですから、Promise.all()などを使って処理する必要があると思います。

Comments

[onakahetta]

ご回答ありがとうございます。ループ内でのpromiseの使い方がいまいち理解できていないのですが、downloadImages()の呼び出しをループ後の.promise().done( function(){ downloadImages(); } );に変更してみました。表題の問題は解決できませんでしたが、ご意見感謝致します。

[Lhankor_Mhy]

.each()はpromiseを返さないので、そのやり方ではダメだと思います。

QRCode.toDataURL()がpromiseを返すようですから、それを参照する必要があります。
ご提示の downloadImages() が参考になると思いますよ。

[Lhankor_Mhy]

あ、いや、違うかな？　考えてみます。