忘れないように記録しとこ

カバの樹

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);
});

 

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

 

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

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

https://www.kabanoki.net/4494/

  • B!