PHP、JS,でQRコードを生成し保存

Question

PHPまたはJSでQRコードを生成し画像ファイルとして保存はできますか？

QRコードを生成して表示はできるのですが保存する方法がわかりません

Answer 1

Webエンジニアとしての観点で
「こうした方が良いんじゃないかな？」と思う内容を記述しておきます。

---

そもそもQRコードは「お好きな文字」を２次元バーコードにして保管する手法でしかありません。
そのアルゴリズムも広く公開されており、jQueryに固執せずともどんな言語でも生成できます。

参考記事: ５分で出来る！PHPでQRコードを生成する方法 - あぱーブログ

というのも画像はファイルサイズが大幅に大きくなるものですので、
30文字程度の日本語なら大体90バイトに収まります。
英数字で30文字なら30バイトです。

しかし画像になると、小指の指先しかないような小さい画像でも
一瞬で数百キロバイトに化けます。
これがチリも積もれば……でユーザーが沢山訪れて1000件保存すれば数百メガバイトになるでしょう。

---

他の観点からもオススメ出来ません。
QRコードは文字列→二次元バーコードへの変換は楽に行なえますが、
二次元バーコード画像から文字列を取り出す事はかなり大変です。

それにより、悪意の第三者がやってきて
反社会的なメッセージや児童ポルノの情報等を大量にWebサーバに保存するなんてことも考えられます。
こういったメッセージを残しておくと犯罪者として取り締まられてしまう可能性がありますので、
Webサーバとして全世界に公開するであればそういった対策も必要となるでしょう。

---

という訳で対応策としてはシンプルになります。

上記の参考記事のようなPHP等のサーバーサイドでQRコードを生成出来るような仕組みを用意しておき、
PHPのWebサーバには普通の文字列を送り込み、
その文字列などをデータベースなんかに突っ込んで、
訪れたユーザーがデータをQRコードでくれと要望してきたタイミングで作って渡す方が健全です。

まぁ、jQueryで出来るのであればPHPは保存された普通の文字列を返して、
ユーザーはjQuery越しにQRコードを生成して勝手に使えば良いという役割分担をしても良いでしょう。
管理者が使いたいのであれば、管理画面をChrome等のブラウザで開いてjQueryで生成した二次元バーコードを閲覧するという仕組みにしても良いと思います。

Answer 2

jquery.qrcode.jsで生成したQRコードを画像としてサーバー側に保存したいです

というのは結構大変です。
アプローチとしては、node.js等のサーバサイドJSが動く環境を作って、そこでjQueryを動かすという形になります。
NodeJSでjQueryを使う

一方で、PHPでQRコードを生成するのは数多く方法が存在するので
PHP QRコード 生成あたりで検索して

【PHP】endroid/qr-codeを使ってQRコードを生成してみる
の様な形で生成して、
echo $qrCode->writeString();
する代わりに戻り値をファイルとして保存してあげれば行けそうな気がします。

Answer 3

QRコードを生成して表示はできるのですが保存する方法がわかりません

どこでどのように生成したのかはわかりませんが、ブラウザ経由でユーザーのPCに保存するなら、ダウンロードさせればよいです。

Comments

[popopop]

jquery.qrcode.jsで生成したQRコードを画像としてサーバー側に保存したいです

Answer 4

QRコードを生成して表示はできるのです

それができるならimgタグにapiを埋め込んで画像を表示してください

jqueryバージョン

• codepen

Comments

[yambejp]

UIとしてはaタグのdownload属性で制御します

[popopop]

jquery.qrcode.jsで生成したQRコードを画像としてサーバー側に保存したいです

[yambejp]

> jquery.qrcode.jsで生成したQRコード

そのサンプルを例示ください

[yambejp]

<script>
$(function(){
$.when(
$('#qrcode').qrcode({width: 64, height: 64, text: "information"})
).done(function(){
var type = 'image/jpeg';
var dataurl = $('#qrcode canvas').get(0).toDataURL(type);
var bin = atob(dataurl.split(',')[1]);
var buffer = new Uint8Array(bin.length);
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
var blob = new Blob([buffer.buffer], {type: type});
var url = URL.createObjectURL(blob);
var href = URL.createObjectURL(blob);
var download="test.jpg";
$('#qrcode canvas').wrap($('<a>').attr({href,download}));
});
});
</script>
<div id="qrcode"></div>

[yambejp]

回答に追記したcodepenを参考にしてください
流れ：canvas作成→blob作成→blobをurlリンク化→
canvasをaでラップして、download属性をつける

結果canvasをクリックするとダウンロードされる