さて、今回の案件では表題のようなリクエストがあった。
全然やった事ないね〜、出来るんかね〜。
とにかくググっていきましょう。
QRコードを生成する
QRコードを生成する事自体はjqueryのプラグインで簡単に出来るみたいです。
jQuery.qrcode.js
QRコードを生成し、SVGで表示してくれるというもの。
ちなみにcdnだと、
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
jQuery本体と合わせて読み込む。
QRコードを生成するソースが以下。
参考にさせてもらった記事
https://onoredekaiketsu.com/create-qr-code-with-javascript/
$(function(){//alert();
var qrtext = "ここにQRコード化したいテキストを入力";
var utf8qrtext = unescape(encodeURIComponent(qrtext));
$("#img-qr").html("");
$("#img-qr").qrcode({text:utf8qrtext});
});
こんなかんじで例えばHTMLを、
<div id=”img-qr”></div>
で作っておけばdiv要素の中にcanvasとして画像が表示される。
生成されたQRコードのデータを取得
さて次に作成したQRコード画像をHTMLメールに埋め込む作業だ。
参考記事：
https://blog.ver001.com/canvas_save_file/
表示されている画像データはjqueryで次のようにして取得出来る。
作成されたQRコード画像のHTMLを見ると
<div id=”img-qr”></div>
の中にcanvas要素が作られている。
だから表示されている画像データはjqueryで↓取得出来る。
var canvas = $(“#img-qr canvas”);
そしてcanvasをJPEG変換し、そのBase64文字列を取得
var my_base = canvas[0].toDataURL(‘image/jpeg’, 0.85);
添字[0]はjqueryオブジェクトから必要なものを取り出すのに必要。
フォームを作っておき、変数my_baseをインプット要素のvalueに入れてやってPOSTでphpに渡してやる。
HTMLメールにQRコード画像を埋め込む
前回で得た変数my_baseの中身はbase64にエンコードされて出来た文字列。
これをimgタグのsrcに設定すると画像が表示される。
ということでHTMLメールを組み立ててimgタグのsrcに変数my_baseを充ててやれば完成・・・
と思いきや実際に送信してみると、
Gmailでは表示されなかった。
別のメールアドレスでmacの「メール」アプリで受信すると画像は表示された。
どうやらGmailではbase64で画像を表示出来ない仕様らしい。
色々調べたが簡単な方法はないようだ。それに関する情報も少ない。
HTMLメールにQRコード画像を埋め込むのはあきらめた
時間がかかりそうなのでHTMLメールにQRコード画像を埋め込むのはやめにする。
作成したQRコードを画像ファイルにしてサーバーに保存し、HTMLメールからはそのurlを参照する形にする。
QRコードを画像ファイルにしてサーバーに保存する
参考記事：
https://am-yu.net/2014/02/04/canvas-pbbs2/
ーー上記記事から引用ーー
//ヘッダに「data:image/png;base64,」が付いているので、それは外す
$canvas = preg_replace("/data:[^,]+,/i","",$canvas);
//残りのデータはbase64エンコードされているので、デコードする
$canvas = base64_decode($canvas);
//まだ文字列の状態なので、画像リソース化
$image = imagecreatefromstring($canvas);
//画像として保存（ディレクトリは任意）
imagesavealpha($image, TRUE); // 透明色の有効
imagepng($image ,'test.png');
これでサーバー上に画像ファイルとして保存出来る。
その画像URLをHTMLメールから参照する事で完成です。
無事Gmailでも表示出来ました。
表示されたQRコードをリーダーで読むとちゃんと情報が書き込まれているのがわかる。
完了！