QRコードを作成する

2016年7月6日

QRコードを生成する

※16/07/08 QRコードの色を変更する機能を追加しました。

自分専用のQRコードジェネレータが欲しくなって作りました。
以下がサンプルコードです。

HTML


<div id="text-box">
  URL:<textarea id="set_url" rows="5"></textarea>
</div>

<div id="size"-box">
  倍率:<input type="number" id="qr_size" value="5" max="33" min="1"/>
</div>

 
<div id="size"-box">
  文字色:<input type="color" id="qr_color" value="#000000" />
</div>

<div id="size"-box">
  背景色:<input type="color" id="qr_background_color" value="#ffffff" />
</div>

 
<div id="size"-box">
  フォーマット:<select id="qr_format">
<option value="jpg">jpg</option>
<option value="png">png</option>
<option value="gif">gif</option>
<option value="svg">svg</option>
</select>
</div>

 

<div><button type="button" >送信</button></div>


<div id="view_qr"></div>


 

javascript

var qr_url = 'https://api.qrserver.com/v1/create-qr-code/?'
$('button').click(function(){
    url = $('#set_url').val();
    size = $('#qr_size').val()*30 + 'x' + $('#qr_size').val()*30;
    format = $('#qr_format').val();
    qr_color = $('#qr_color').val().replace( /#/g , "" );
    qr_background_color = $('#qr_background_color').val().replace( /#/g , "" );
    img = $('<img src="' + qr_url + 'size=' + size + '&data=' + url + '&format=' + format + '&color=' + qr_color + '&bgcolor=' + qr_background_color +'">');

    $('#view_qr').html(img);
});

See the Pen google QR generater by カバの樹 (@kabanoki) on CodePen.0

 

ちょっとカスタマイズがしたいなー、という方は以下のURLがドキュメントとなっています。
そちらを確認してみると面白いかもしれません。
http://goqr.me/api/doc/create-qr-code/

 

Vue.jsのライブラリでQRコードを作成する記事を書きました。

興味がありましたらこちらもどぞー

お手軽なQRコード作成ライブラリ「vue-qriously」で試す

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-jQuery
-