Q&A
jquery.qrcode.min.js のドキュメントをご提示ください。
QRコードを動的に生成したく、
https://on-ze.com/archives/6022
こちらのサイトを参考にさせていただき、javascriptでQRコードをブラウザ上に表示させることはできました。
上記参考サイトから作ったコードは下記になります。
<html> <head> <script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="jquery.qrcode.min.js"></script>$(function() { $('#qrcode').qrcode({width: 150, height: 150, text: "qrcodeData"}); }); </script> </head> <body> <div id="qrcode"></div> </body> </html>
ブラウザ上にはQRコードが表示できたのですが、これを同じ画面にダウンロードボタンを作って
QRコードの画像をダウンロードさせたいと思っております。
javascriptでもphpでも構わないのですが、どのようにしたら実現できるのかがわからず、
質問させていただきました。
実態のある、○○○○.pngなどのデータがサーバー上にあるならば、それをダウンロードすることは分かるのですが、
上記のようにjavascriptで動的に作られていて実態のない画像の場合どうすればよいかがわからず、
教えていただければと思います。
よろしくお願いいたします。
回答4件
0
当該ライブラリはcanvasにQRコードをレンダリングする(テーブルとしても出力できますが画像ではないので無視します)ので，そのまわりの機能で対応が可能です．
まず，特に何もしてなければ表示されたQRコードを右クリックして保存ができるはずです．
あるいは，ボタンを押して保存させたければ 【Javascript】ボタンを押すとcanvasを画像としてダウンロード - Qiita で紹介されているような手法が使えます．
$('#save').click(function() { const a = document.createElement('a') a.href = $('.qrcode cannvas')[0].toDataURL('image/png') a.download = 'qrcode.png' a.click() })
投稿2020/07/31 07:11
総合スコア132
0
こんにちは。
ドキュメント（これで合ってますよね？）を見たところ、canvasのようだったので、このような方法はいかがですか？
js
1a = document.createElement('a'); 2a.href = document.getElementById('qrcode').children[0].toDataURL(); 3a.download = "qrcode.png"; 4a.click();
投稿2020/07/31 07:16
総合スコア36960
0
ベストアンサー
書こうとおもったらすでにほぼ同じの回答があがってました
一応クリック処理だけ追加してあります
投稿2020/07/31 07:12
編集2020/07/31 07:18
総合スコア116724
<script>
$(function(){
$.when(
$('#qrcode').qrcode({width: 150, height: 150, text: "qrcodeData"})
).done(function(){
var type = 'image/png';
var href = $('#qrcode canvas').get(0).toDataURL(type);
var download="test.png";
$('#qrcode canvas').wrap($('<a>').attr({href,download}));
});
});
</script>
<div id="qrcode"></div>
すごいです！
みなさま、ありがとうございます。
0
データURLを開かせることで可能です。
データ URL - HTTP | MDN
このライブラリのDEMO が見当たらないのでどんな挙動かわかりませんが、
生成された画像 img タグなどの src が data:~~~ という文字列になっている可能性が高いです。
その文字列を取得して ( $("#qrcode img").attr("href") などで)
新しいタブで開くとダウンロードさせることができます。
ライブラリによっては .dataURL() などの関数で取り出せるようになっています。
投稿2020/07/31 07:10
総合スコア662
あなたの回答
tips
プレビュー
