Google Chart APIでQRコードを生成、保存する

自分用メモ jQuery Google Chart API

Google Chart APIを使うと簡単にQRコードが生成できるメモ

QRコード生成

<img src="">にURLを設定すると生成できる

例えばこんな感じ

<img src="https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=URLhttp://seto-abe.hatenablog.com/">

わかりやすく分割すると
https://chart.googleapis.com/chart
?
chs=300x300
&
cht=qr
&
chl=http://seto-abe.hatenablog.com/

それぞれの説明

chs=　QRコードのサイズ　縦横比率は同じにする
cht=　これはそのままqrで
chl=　QRコードにしたいURLを指定

これで生成したのがこれ↓

https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=URLhttp://seto-abe.hatenablog.com/

QRコードの保存

せっかく作ったので画像保存もさせる

<a class="qr-save">保存</a>

$(document).on('click', '.qr-save', function(e){
    $target = $(e.target);
    $target.attr({
        download: 'qr.png',
        href: 'https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=URLhttp://seto-abe.hatenablog.com/'
    });
});

これで保存できる