재우니의 블로그

jQuery.qrcode 를 활용한 qr code 생성하기

프로그래밍/jQuery 👍
2021. 9. 14. 23:52

 

jQuery.qrcode를 사용하면 웹사이트에 QR 코드를 동적으로 추가할 수 있습니다. canvas 또는 divs 를 선택하여 코드를 렌더링 할 수 있습니다. 후자는 구형 브라우저에서도 괜찮습니다. 

 

생성된 QR 코드는 콘텐츠(최소 블록 수)를 인코딩하는 데 필요한 최소 버전입니다.  데모 사이트에서 확인이 가능합니다. 해당 플러그인은 h5ai 에서 파일 항목에 대한 QR 코드를 생성 하는 데 사용됩니다 .

 

 

 

더보기

jQuery.qrcode enables you to dynamically add QR codes to your website. Choose between rendering the code in a canvas or with divs. The latter will be fine even for older browser. The generated QR code will be in the least possible version requiered to encode the content (least number of blocks). See the demo to get a first impression. This plugin is used in h5ai to generate QR codes for file entries.

 

사용해 본 결과 영문이나 한글은 깨지지 않고 잘 출력이 됩니다. 해당 코드를 실행하면 qr code 를 제공하며, 스마트폰의 카메라를 통해 읽어 들여 자동적으로 내장된 브라우저를 통해 경고 또는 모달창으로 qr code 의 내용 글을 보여줍니다. 

 

 

여기서 글자 문구는 text 라는 속성값이며, 이 부분을 원하는 글자 문구를 작성하면 됩니다. qr code 의 칼라를 변경하고자 한다면 fill 속성값을 변경하시면 됩니다.

 

 

코드 내용

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery.qrcode 0.18.0 Demo</title>
    <meta name="description" content="Demo for jQuery.qrcode (https://larsjung.de/jquery-qrcode/).">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link href="//fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&amp;display=swap" rel="stylesheet">
    <script src="jquery.min.js"></script>
    <script src="../jquery-qrcode-0.18.0.js"></script>

    <script>
        $(function () {

            var options = {
                // render method: 'canvas', 'image' or 'div'
                render: 'canvas',

                // version range somewhere in 1 .. 40
                minVersion: 1,
                maxVersion: 40,

                // error correction level: 'L', 'M', 'Q' or 'H'
                ecLevel: 'L',

                // offset in pixel if drawn onto existing canvas
                left: 0,
                top: 0,

                // size in pixel
                size: 300,

                // code color or image element
                fill: '#47669F',

                // background color or image element, null for transparent background
                background: null,

                // content
                text: '전자문진결과 정상입니다.',

                // corner radius relative to module width: 0.0 .. 0.5
                radius: 0,

                // quiet zone in modules
                quiet: 0,

                // modes
                // 0: normal
                // 1: label strip
                // 2: label box
                // 3: image strip
                // 4: image box
                mode: 0,

                mSize: 0.1,
                mPosX: 0.5,
                mPosY: 0.5,

                label: 'no label',
                fontname: 'sans',
                fontcolor: '#000',

                image: null
            }

            $("#container").qrcode(options);
        });
    </script>
</head>

<body>
    <div id="container"></div>
</body>

</html>

 

 실행결과

 

jquery-qrcode-0.18.0.zip
0.06MB

 

 

참고사이트

 

https://larsjung.de/jquery-qrcode/

 

jQuery.qrcode · generate QR codes dynamically · larsjung.de

generate QR codes dynamically

larsjung.de

 

 

ASP.NET MVC 를 개발하시는 분들에게 도움이 될까 해서 추가적으로 말씀 드리면, 해당 QR CODE 를 SERVER 의 특정 폴더에 이미지로 저장하는 방법을 설명 드릴 까 합니다.

 

QR CODE 값을 문자열로 받아서 전송하기 위해 HIDDEN 인 imageData 를 생성하였습니다. 

<body>

    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "drawingForm" }))
    {
        <input type="hidden" name="imageData" id="imageData" />
        <div id="container"></div>
        <input type="button" id="btnSave" value="Save Drawing" />
    }
</body>

 

canvas 의 QR CODE 값을 png 로 변환하기 위해 toDataURL 함수를 통해 이를 imageData 에 담아 둡니다.

$("#btnSave").click(function () {
  var form = $("#drawingForm");
  var image = document.querySelector("#container > canvas").toDataURL("image/png");
  image = image.replace('data:image/png;base64,', '');

  $("#imageData").val(image);
  form.submit();
});

 

Controller 에서 해당 QR Code 를 받아 이를 base64 로 변환하여 byte[] 받아서 이를 FileStream 객체에 할당하여 파일 저장합니다.

        [HttpPost]
        public ActionResult Index(string imageData)
        {
            string fileName = "MyUniqueImageFileName.png";
            string fileNameWitPath = Path.Combine(Server.MapPath("~/FolderToSave"), fileName);

            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
            {
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
                    byte[] data = Convert.FromBase64String(imageData);
                    bw.Write(data);
                    bw.Close();
                }
                fs.Close();
            }

            return View();
        }

 

참고 사이트

 

https://www.dotnetfunda.com/articles/show/2665/saving-html-5-canvas-as-image-in-aspnet-mvc

 

Saving HTML 5 canvas as Image in ASP.NET MVC - DotNetFunda.com

Introduction In HTML 5, creating a graphics has become easier in the browser using Canvas element and JavaScript. There are few articles on DotNetFunda.com already that demonstrate the power of Canvas, one more article on this topic is introducing Canvas

www.dotnetfunda.com

 

저작자표시 비영리 동일조건

'프로그래밍 > jQuery 👍' 카테고리의 다른 글

fullCalendar 의 tooltip 및 좌측 시간별 width 조절하기  (0) 2023.03.16
jQuery : jQuery.countdown 카운트 다운 count down 라이브러리  (0) 2022.10.21
javascript 이메일 정규식 생성하기 email regex validation  (7) 2021.03.11
jQuery 의 년월 달력 year month, 년월일 year month day 달력 샘플 소스  (2) 2021.02.17
javascript - ie 10 이하 브라우저 경고창 띄우기  (0) 2020.12.23

티스토리툴바