jQuery.qrcodeenables you to dynamically add QR codes to your website. Choose between rendering the code in acanvasor withdivs. 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 thedemoto get a first impression. This plugin is used inh5aito generate QR codes for file entries.
사용해 본 결과 영문이나 한글은 깨지지 않고 잘 출력이 됩니다. 해당 코드를 실행하면 qr code 를 제공하며, 스마트폰의 카메라를 통해 읽어 들여 자동적으로 내장된 브라우저를 통해 경고 또는 모달창으로 qr code 의 내용 글을 보여줍니다.
여기서 글자 문구는 text 라는 속성값이며, 이 부분을 원하는 글자 문구를 작성하면 됩니다. qr code 의 칼라를 변경하고자 한다면 fill 속성값을 변경하시면 됩니다.
코드 내용
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>jQuery.qrcode 0.18.0 Demo</title><metaname="description"content="Demo for jQuery.qrcode (https://larsjung.de/jquery-qrcode/)."><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="//fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap"rel="stylesheet"><scriptsrc="jquery.min.js"></script><scriptsrc="../jquery-qrcode-0.18.0.js"></script><script>
$(function () {
var options = {
// render method: 'canvas', 'image' or 'div'render: 'canvas',
// version range somewhere in 1 .. 40minVersion: 1,
maxVersion: 40,
// error correction level: 'L', 'M', 'Q' or 'H'ecLevel: 'L',
// offset in pixel if drawn onto existing canvasleft: 0,
top: 0,
// size in pixelsize: 300,
// code color or image elementfill: '#47669F',
// background color or image element, null for transparent backgroundbackground: null,
// contenttext: '전자문진결과 정상입니다.',
// corner radius relative to module width: 0.0 .. 0.5radius: 0,
// quiet zone in modulesquiet: 0,
// modes// 0: normal// 1: label strip// 2: label box// 3: image strip// 4: image boxmode: 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><divid="container"></div></body></html>