HTML 및 JavaScript를 사용하여 사용자 정의 아이콘과 텍스트가 있는 QR코드를 작성합니다.

배경과 배경

빠른 응답(QR) 코드는 강력한 도구입니다.QR코드는 정사각형 격자에 있는 일련의 픽셀로 정보를 저장하는 바코드로, 스마트폰 등 디지털 기기는 카메라를 통해 쉽게 읽을 수 있다.QR코드는 공급망에서 제품의 정보를 추적하는 데 자주 사용되고 마케팅과 광고 활동에 자주 사용된다.QR코드의 가장 흔히 볼 수 있는 용도는 URL을 삽입하는 것이다. 이렇게 하면 링크를 공유할 수 있고, URL 표시줄에 수동으로 정확하게 입력할 필요가 없다.
나는 최근에 내 팀이 관리하는 웹 응용 프로그램에 화폐 교환 기능을 구축해야만 했다.GUID가 있는 직접 URL이 가장 좋은 해결 방안인 것 같습니다.Guid는 매우 길어서 교환 과정을 간소화하기 위해 QR코드를 사용하여 기호화폐를 나눠주기로 했다.우리는 수백 개의 기호화폐를 생성해야 한다.오류와word를 사용하여 수동으로 카드를 만드는 번거로운 과정을 피하다😂, 이거 자동화하기로 했어요.JavaScript는 현재 내가 모든 빠른 문제를 해결하는 도구이기 때문에 웹 기반의 해결 방안을 찾았다.

문제 해결 방안

우리는 중간에 QR코드가 있는 카드 한 장과 첨부된 문자로 축하를 표시하고 QR코드를 어떻게 바꾸는지 설명을 제공해야 한다.우리는 모든 사람이 QR코드를 스캔할 수 있는 휴대전화를 가지고 있는 것은 아니라는 것을 안다. 어떤 사람들은 QR코드를 어떻게 스캔하는지 모를 수도 있다.이 문제를 해결하기 위해서 우리는 간단한 입력 상자를 구축하여 사람들이 수동으로guid를 입력할 때 입력할 수 있도록 했다.이렇게 하면 GUID를 배포된 카드에 인쇄해야 하는 요구 사항이 늘어납니다.
이것은 우리가 반드시 세 가지 일을 해서 이 문제를 해결해야 한다는 것을 의미한다.

QR코드 생성

Guid

가 포함된 QR코드를 중심으로 텍스트 생성

납득 가능한 형식으로 다운로드하여 만든 카드

솔루션 - 섹션 1: QR코드 생성

해결 방안의 핵심은 자동으로 QR코드를 생성하는 것이다.웹 개발에 관해서 내가 가장 좋아하는 것은 이 분야의 개발자들의 협업 정신이다.우스갯소리처럼 "당신이 필요로 하는 것을 검색하고 그 뒤에 'js' 접미사를 붙이면, 이 점을 할 수 있는 라이브러리를 찾을 수 있다."
QR Code Styling 패키지를 찾기 전에 나는 몇 개의npm 패키지를 훑어보았는데 이 패키지는 간단하고 알기 쉬우며 입문하기 쉽다.
unpkg 패키지를 사용할 수 있습니다. unpkg은 빠른 글로벌 콘텐츠 납품 네트워크 (cdn) 로 npm의 모든 내용에 적용됩니다.html 페이지의 머리에서 다음 줄을 사용하여 스크립트를 포함할 수 있습니다.

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

일단 포함되면, '옵션' 대상을 매개 변수로 하는 새로운 QRcodeStyleing 구조 함수를 사용하여 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코드를'canvas'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();
    });

html2canvas 라이브러리에서 목표 html 요소를 수신하고 새로운 캔버스 요소를 가진 약속을 되돌려줍니다.그런 다음 새 다운로드 링크를 만들고 새 캔버스(데이터 URL로 변환)를 링크의 내용으로 지정한 다음 파일 이름을 클릭한 다음 생성된 캔버스를 다운로드할 수 있습니다.
페이지를 불러오고 화면 채우기와 'output' div 다운로드를 보십시오.png 파일.
나는 네가 이 문장이 매우 유용하다고 생각하기를 바란다. 나는 네가 이 도구로 무엇을 세웠는지 매우 보고 싶다.언제든지 댓글로 공유해 주세요.