JavaScriptでQRコードを生成する方法

2025-04-13

※「QRコード」は株式会社デンソーウェーブの登録商標です。

QRコードジェネレータ

テキストエリアに入力された文字列からQRコードを作成するジェネレータです。

https://s-okada.org/createQrCode

JavaScriptでQRコードを作成する方法

ライブラリをダウンロードします。こちらに本家のサンプルなどがあります。

https://davidshimjs.github.io/qrcodejs/

スクリプトを使用するメリット

JavaScriptで作成することで、画像ファイルなどを事前に用意する必要がなくなります。

例えばgetパラメータで受け取った値からQRコードを生成すればいつでもQRを出すことができます。

今ではほとんどのブラウザで動作するのでいいかもしれません。

サンプルコード

<div id="qrcode"></div><br/>
<a id="download-png" href="#" onclick="downloadPng();" style="display:none;">
PNGでダウンロード
</a>

<!-- 中略 -->
<script src="./js/qrcode.min.js"></script>
<script>
    function createQrCode() {
        document.getElementById('qrcode').textContent = '';
        new QRCode('qrcode', {
            text: $('#inp').val(),
            width: 128,
            height: 128,
            correctLevel : QRCode.CorrectLevel.H
        });
        $('#download-png').show();
    }
    function downloadPng() {
        // PNGのダウンロードリンク
        var link = document.getElementById('download-png');
        link.href = $("#qrcode").children('img')[0].getAttribute('src');
        link.download = 'qrcode.png';
    }
</script>