カスタムアイコンとテキストを使用してQRコードを作成する

背景と文脈
クイックレスポンス(QR)コードは、強力なツールです.QRコードは、そのようなスマートフォンのようなデジタル・デバイスによってそのカメラを通して簡単に読むことができる正方形のグリッドのピクセルのシリーズとして情報を格納する一種のバーコードです.QRコードは頻繁にサプライチェーンの製品に関する情報を追跡するために使用され、しばしばマーケティングや広告キャンペーンで使用されます.QRコードのための最も一般的な使用は、URLを埋め込むことです-あなたの能力を手動でURLバーでそれを入力することの退屈なタスクなしでリンクを共有することを与える.
私は最近、私のチームが維持するWebアプリケーションにトークン償還機能を構築しなければなりませんでした.GUIDによるダイレクトURLは、行く最も良い解決であるようでした.Guidは非常に長いと償還プロセスを簡素化するために、我々はトークンをQRコードを使用して配布することを決めた.何百ものトークンを生成する必要がありました.誤って単語を手動でカードを作成する退屈なプロセスを避けるために😂, これを自動化することにしました.JavaScriptは現在、私はすべての迅速な問題を打ったハンマーですので、私はWebベースのソリューションを探しました.

問題の解決
途中でQRコードを持っているカードと、“おめでとう”を言うために付随するテキストを持っていて、コードを交換する方法についての指示を提供するカードが必要です.私たちは誰もがQRコードをスキャンすることが可能な電話を持っているといくつかの人々だけではわからないかもしれないと理解しました.この問題に対処するために、私たちは手動でGUIDを手動で入力することを許可する簡単な入力ボックスを構築します.これは、我々が配布するカードにGUIDを印刷する必要条件を加えました.
これは、この問題を解決するために3つのことをしなければならないことを意味します.

はQRコード

を生成します

GUID

を含むQRコードのまわりでテキストを生成します

は、許容されたフォーマット

の結果として生じる「カード」をダウンロードする

解決-パート1 : QRコードを生成する
ソリューションのコアは、自動的にQRコードを生成します.Web開発についての私のお気に入りのものはスペースの開発者の共同の精神です.として冗談が行く:“だけで何を必要とすると”JS ';とチャンスをサフィックスを検索する場合は、それを正確に行うライブラリを見つけることです
私はいくつかのNPMのパッケージを介して理解し、簡単に始めるために簡単ですQR Code Stylingパッケージを見つける前に行った.
NPM上のすべてのための高速、グローバルコンテンツ配信ネットワーク(CDN)であるUNPKGを使用してパッケージを含めることができます.HTMLページの先頭に次の行を使用してスクリプトを含めることができます.

<script type="text/javascript" src="https://unpkg.com/[email protected]/lib/qr-code-styling.js"></script>

一旦含まれるならば、あなたはパラメタとして「オプション」オブジェクトをとる新しいQRCodeyling建設者を使用してQRコードの新しいインスタンスを作成することができます.このオプションの最も基本的なプロパティは、幅と高さとして表現されたコードの次元、コードを表現するデータ、例ではURL、QRコードの中心にあるイメージを持つURL、およびコードの端をどのように丸めたかのようなコードのルックアンドフィールを設定するオプションを含みます.QRコードスタイリングドキュメントから適応したコード例を以下に示します.

<script type="text/javascript">

    const qrCode = new QRCodeStyling({
        width: 300,
        height: 300,
        type: "svg",
        data: "https://dev.to/luckynkosi/",
        image: "https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.svg",
        dotsOptions: {
            color: "#4267b2",
            type: "rounded"
        },
        backgroundOptions: {
            color: "#e9ebee",
        },
        imageOptions: {
            crossOrigin: "anonymous",
            margin: 20
        }
    });
    //place it on the screen
    qrCode.append(document.getElementById("canvas"));
    //download the generate image of the QR code
    qrCode.download({ name: "qr", extension: "svg" });
</script>

オプションオブジェクトの設定は面倒です.幸いにも、Denys Kozakはあなたが見て、簡単なインターフェイスを使用して感じて構成し、JSONファイルとして設定をエクスポートすることができます華麗なウェブサイトを作成しています.私は設定で遊んで、すべてを勾配にしました.エクスポートされたJSONオブジェクトは以下の通りです.

{"width":300,"height":300,"data":"https://dev.to/luckynkosi/","margin":0,"qrOptions":{"typeNumber":"0","mode":"Byte","errorCorrectionLevel":"Q"},"imageOptions":{"hideBackgroundDots":true,"imageSize":0.4,"margin":0},"dotsOptions":{"type":"extra-rounded","gradient":{"type":"linear","rotation":0,"colorStops":[{"offset":0,"color":"#7a0617"},{"offset":1,"color":"#beb819"}]}},"backgroundOptions":{"gradient":{"type":"radial","rotation":0,"colorStops":[{"offset":0,"color":"#26922d"},{"offset":1,"color":"#ecc1c1"}]}},"image":"data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjM1IDIzNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBjbGFzcz0icmFpbmJvdy1sb2dvIgogICAgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gbWVldCI+CiAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8ZyBpZD0iODBLIj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODhBRURDIiBwb2ludHM9IjIzNC4wNCAxNzUuNjcgMTU4LjM1IDIzMy45NSAyMDUuNTMgMjMzLjk1IDIzNC4wNCAyMTIiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBwb2ludHM9IjIzNC4wNCAxNDAuMDYgMTEyLjExIDIzMy45NSAxMTIuMTMgMjMzLjk1IDIzNC4wNCAxNDAuMDgiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBwb2ludHM9IjEzMy4yNSAwLjk1IDAuMDQgMTAzLjUxIDAuMDQgMTAzLjUzIDEzMy4yNyAwLjk1Ij48L3BvbHlnb24+CiAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iI0Y1OEY4RSIgZmlsbC1ydWxlPSJub256ZXJvIiBwb2ludHM9IjAuMDQgMC45NSAwLjA0IDMxLjExIDM5LjIxIDAuOTUiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjRkVFMThBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMzkuMjEgMC45NSAwLjA0IDMxLjExIDAuMDQgNjcuMDEgODUuODQgMC45NSI+PC9wb2x5Z29uPgogICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNGM0YwOTUiIGZpbGwtcnVsZT0ibm9uemVybyIgcG9pbnRzPSI4NS44NCAwLjk1IDAuMDQgNjcuMDEgMC4wNCAxMDMuNTEgMTMzLjI1IDAuOTUiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjNTVDMUFFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMTMzLjI3IDAuOTUgMC4wNCAxMDMuNTMgMC4wNCAxMzkuMTIgMTc5LjQ5IDAuOTUiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjRjdCM0NFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMjM0LjA0IDAuOTUgMjI2LjY3IDAuOTUgMC4wNCAxNzUuNDUgMC4wNCAyMTEuMzggMjM0LjA0IDMxLjIiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODhBRURDIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMTc5LjQ5IDAuOTUgMC4wNCAxMzkuMTIgMC4wNCAxNzUuNDUgMjI2LjY3IDAuOTUiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjRjU4RjhFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMjM0LjA0IDMxLjIgMC4wNCAyMTEuMzggMC4wNCAyMzMuOTUgMTguMDcgMjMzLjk1IDIzNC4wNCA2Ny42NSI+PC9wb2x5Z29uPgogICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNGRUUxOEEiIGZpbGwtcnVsZT0ibm9uemVybyIgcG9pbnRzPSIyMzQuMDQgNjcuNjUgMTguMDcgMjMzLjk1IDY0LjcgMjMzLjk1IDIzNC4wNCAxMDMuNTYiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjRjNGMDk1IiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMjM0LjA0IDEwMy41NiA2NC43IDIzMy45NSAxMTIuMTEgMjMzLjk1IDIzNC4wNCAxNDAuMDYiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjNTVDMUFFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMjM0LjA0IDE0MC4wOCAxMTIuMTMgMjMzLjk1IDE1OC4zNSAyMzMuOTUgMjM0LjA0IDE3NS42NyI+PC9wb2x5Z29uPgogICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNGN0IzQ0UiIGZpbGwtcnVsZT0ibm9uemVybyIgcG9pbnRzPSIyMzQuMDQgMjEyIDIwNS41MyAyMzMuOTUgMjM0LjA0IDIzMy45NSI+PC9wb2x5Z29uPgogICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM3LjAwMDAwMCwgNzcuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgPHBhdGggZD0iTTI4LjIzNzE1MTcsMC43NSBDMzIuNzUxMDgzNiwxLjcgMzYuMDExMTQ1NSwzLjU1IDM5LjM3MTUxNyw3LjA1IEM0Mi40MzA5NTk4LDEwLjI1IDQ0LjMzNjg0MjEsMTMuOSA0NS4xMzkzMTg5LDE4IEM0NS43OTEzMzEzLDIxLjQ1IDQ1Ljc5MTMzMTMsNTguNTUgNDUuMTM5MzE4OSw2Mi4wNSBDNDMuNDM0MDU1Nyw3MS4xNSAzNS42NjAwNjE5LDc4LjI1IDI2LjAzMDM0MDYsNzkuNSBDMjQuMDI0MTQ4Niw3OS43NSAxNy4zMDM0MDU2LDgwIDExLjE4NDUyMDEsODAgTC03LjEwNTQyNzM2ZS0xNSw4MCBMLTcuMTA1NDI3MzZlLTE1LDEuNDIxMDg1NDdlLTE0IEwxMi40MzgzOTAxLDEuNDIxMDg1NDdlLTE0IEMyMS4yNjU2MzQ3LDEuNDIxMDg1NDdlLTE0IDI1Ljc3OTU2NjYsMC4yIDI4LjIzNzE1MTcsMC43NSBaIE0xNC41NDQ4OTE2LDQwIEwxNC41NDQ4OTE2LDY1LjYgTDE5LjcxMDgzNTksNjUuNCBDMjQuMTc0NjEzLDY1LjI1IDI1LjEyNzU1NDIsNjUuMDUgMjcuMTMzNzQ2MSw2My45IEMzMS4wNDU4MjA0LDYxLjYgMzEuMDk1OTc1Miw2MS40NSAzMS4wOTU5NzUyLDM5LjcgQzMxLjA5NTk3NTIsMTguNSAzMS4wOTU5NzUyLDE4LjUgMjcuNDM0Njc0OSwxNi4xIEMyNS42MjkxMDIyLDE0LjkgMjQuODc2NzgwMiwxNC43NSAxOS45NjE2MDk5LDE0LjU1IEwxNC41NDQ4OTE2LDE0LjQgTDE0LjU0NDg5MTYsNDAgWiIKICAgICAgICAgICAgICBpZD0iQ29tYmluZWQtU2hhcGUiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNOTMuNzg5NDczNyw3LjI1IEw5My43ODk0NzM3LDE0LjUgTDY4LjIxMDUyNjMsMTQuNSBMNjguMjEwNTI2MywzMi41IEw4My43NTg1MTM5LDMyLjUgTDgzLjc1ODUxMzksNDcgTDY4LjIxMDUyNjMsNDcgTDY4LjMxMDgzNTksNTYuMSBMNjguNDYxMzAwMyw2NS4yNSBMODEuMTUwNDY0NCw2NS40IEw5My43ODk0NzM3LDY1LjUgTDkzLjc4OTQ3MzcsODAgTDc4Ljk5MzgwOCw4MCBDNjIuNTQzMDM0MSw4MCA1OS45ODUxMzkzLDc5LjcgNTcuMzc3MDg5OCw3Ny40IEM1My43MTU3ODk1LDc0LjIgNTMuOTE2NDA4Nyw3Ni4yNSA1My43NjU5NDQzLDQxLjEgQzUzLjY2NTYzNDcsMTkuMiA1My44MTYwOTkxLDguODUgNTQuMTY3MTgyNyw3LjQ1IEM1NC44NjkzNDk4LDQuODUgNTcuODI4NDgzLDEuNjUgNjAuNDM2NTMyNSwwLjc1IEM2MS45OTEzMzEzLDAuMiA2NS45MDM0MDU2LDAuMDUgNzguMTQxMTc2NSw0LjI2MzI1NjQxZS0xNCBMOTMuNzg5NDczNyw0LjI2MzI1NjQxZS0xNCBMOTMuNzg5NDczNyw3LjI1IFoiCiAgICAgICAgICAgICAgaWQ9IlBhdGgiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNMTI1LjQzNzE1MiwyOC4xIEMxMjkuMTQ4NjA3LDQyLjM1IDEzMi4yNTgyMDQsNTMuNyAxMzIuMzU4NTE0LDUzLjM1IEMxMzIuNTA4OTc4LDUzIDEzNS42Njg3MzEsNDAuOTUgMTM5LjQzMDM0MSwyNi41IEwxNDYuMzAxNTQ4LDAuMjUgTDE1NC4xMjU2OTcsMC4xIEMxNjAuMDQzOTYzLDcuMTA1NDI3MzZlLTE1IDE2MiwwLjE1IDE2MiwwLjYgQzE2MiwxLjA1IDE0NC42NDY0NCw2Ni44IDE0My42NDMzNDQsNzAuMSBDMTQyLjk0MTE3Niw3Mi40IDEzOS4xNzk1NjcsNzcuMSAxMzcuMDczMDY1LDc4LjM1IEMxMzQuNDE0ODYxLDc5Ljg1IDEzMC41MDI3ODYsODAuMSAxMjguMDk1MzU2LDc4Ljg1IEMxMjUuOTM4Nyw3Ny43NSAxMjMuMDc5ODc2LDc0LjQ1IDEyMS42MjUzODcsNzEuMzUgQzEyMC43MjI2MDEsNjkuNDUgMTA1Ljk3NzA5LDE1LjM1IDEwMi41NjY1NjMsMS4zNSBMMTAyLjIxNTQ4LDAgTDExMC4wMzk2MjgsMCBDMTE3LjcxMzMxMywwIDExNy45MTM5MzIsMCAxMTguMzE1MTcsMS4xIEMxMTguNTE1Nzg5LDEuNzUgMTIxLjcyNTY5NywxMy45IDEyNS40MzcxNTIsMjguMSBaIgogICAgICAgICAgICAgIGlkPSJQYXRoIj48L3BhdGg+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=","dotsOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#6a1a4c","color2":"#6a1a4c","rotation":"0"}},"cornersSquareOptions":{"type":"extra-rounded","gradient":{"type":"radial","rotation":0.017453292519943295,"colorStops":[{"offset":0,"color":"#3e747e"},{"offset":1,"color":"#de720d"}]}},"cornersSquareOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#000000","color2":"#000000","rotation":"0"}},"cornersDotOptions":{"type":"","gradient":{"type":"radial","rotation":0,"colorStops":[{"offset":0,"color":"#ff0000"},{"offset":1,"color":"#1c93ce"}]}},"cornersDotOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#000000","color2":"#000000","rotation":"0"}},"backgroundOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#ffffff","color2":"#ffffff","rotation":"0"}}}

第2部:スペースを飾る
上記のQRコードスタイリングの例では、生成されたQRコードを「キャンバス」IDを持つ要素に追加します.スタイリングをあなたに残しますが、次のようにテキストコンポーネントのHTMLを追加できます.

<body>
<div id="output">
    <p>Congratulations. To redeem your token, scan the below Code</p>
    <div id="canvas"></div>
    <p>OR</p>
    <p>
      Enter the below claim code on the redemption site to redeem your token
    </p>
      <p><strong class="guid"></strong></p>
    </div>
</div>
</body>

以下は、上記のコードが何を表すかの例です.


ソリューション-パート3 :トークンのダウンロード.
この点で、我々は我々がHTMLでスクリーンで必要とするすべてを持ちます.次のステップは、画像として国境を含むすべてをダウンロードしてください.これを達成するために、我々は「スクリーンショット」を我々がイメージとしてダウンロードして、結果をダウンロードしたいウェブページの一部にする必要があります.我々は、これを達成するためにHTML2Canvasを使用することができます.
スクリーンショットはDOMに基づいています、そして、それが実際の表現に正確な100 %正確でないかもしれなくて、それが実際のスクリーンショットを作りませんが、スクリーンの上で利用できるスクリーンショットを構築します
QRコードスタイリングと同様に、以下のスクリプトをインポートできます.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>

次に、「スクリーンショット」を実装し、次のコードを使用してダウンロードします.

    html2canvas(document.getElementById('output'))
    .then((canvas) => {
        let link = document.createElement("a");
        link.download = 'fileName.png';
        link.href = canvas.toDataURL("image/jpg");;
        link.click();
    });

HTML 2 Canvasライブラリは、ターゲットのHTML要素を取り込み、新しいキャンバス要素を持つプロンプトを返します.その後、リンクの内容として新しいキャンバス(データURLに変換)を使用して新しいダウンロードリンクを作成することができますし、ファイル名を指定し、それから結果のキャンバスをダウンロードする“クリック”.
ページをロードして、スクリーンを見てください.PNGファイル.
私はこの記事が役に立つと私はこれらのツールを使用してビルドを参照してくださいしたいと思います願っています.コメントを共有してください.