qrcode.js를 이용해 띄우기
더보기
우선 보기좋게하기위해 최소한의 css를 지정한다.
<style>
body * {margin: auto;text-align: center;}
input {display: block;width:200px;}
#qrcode{width:200px; height:200px; margin-top:15px;}
</style>
값이 들어갈 input, qr이 만들어질 div를 만든다.
<input id="text" type="text" value="https://google.com"/>
<div id="qrcode"></div>
jquery연결 후, qrcode.js연결
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="crossorigin="anonymous"></script>
<script src='https://cdn.jsdelivr.net/gh/baroninn/qrcodejs@master/qrcode.js'></script>
스크립트 추가. 끝.
<script>
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 200,
height: 200
});
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
//alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
아래와 같은 결과물을 볼 수 있다.
'Personal > Tip' 카테고리의 다른 글
사람 이미지만들기 blush.design (0) | 2023.03.21 |
---|---|
이메일코딩, image-map.net (0) | 2023.03.21 |
BARCODE 만들기 barcode.tec-it.com (0) | 2023.03.21 |
pangram 팬그램, 모든문자를 사용해 쓸 수 있는 한 문장 (0) | 2023.03.21 |
QR CODE 만들기 qrcode.tec-it.com (0) | 2023.03.20 |