티스토리 뷰

IT tech Coding/javascript

[자바스크립트+php] 나만의 내것의 QR코드 생성기 만들어보자~

Coding Life 2024. 6. 19. 14:05
반응형

내가 서버와 웹사이트를 운영하는데, 자바스크립트와 php로 만든 웹사이트이다.
혹시 QR코드를 생성하는 무료 라이브러리가 있을까? 300DPI 이상으로 나와야 하거든요^^

QR 코드를 생성하는 데 사용할 수 있는 몇 가지 무료 라이브러리가 있습니다. 자바스크립트와 PHP 환경에서 각각 사용할 수 있는 라이브러리를 소개해드리겠습니다.


자바스크립트용 라이브러리
qrcode.js

GitHub: qrcode.js
간단한 QR 코드 생성을 지원하며, 브라우저에서 바로 사용 가능합니다.
사용 예시:
html
코드 복사
<script src="path/to/qrcode.min.js"></script>
<div id="qrcode"></div>
<script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: "https://www.example.com",
        width: 256, // DPI 설정 가능
        height: 256,
    });
</script>
QRCode.js (by Kazuhiko Arase)

GitHub: QRCode.js
다양한 옵션을 제공하며, 브라우저와 Node.js 환경 모두에서 사용 가능합니다.
사용 예시:
html
코드 복사
<script type="text/javascript" src="path/to/qrcode.js"></script>
<script type="text/javascript">
    var qr = qrcode(4, 'L');
    qr.addData('https://www.example.com');
    qr.make();
    document.getElementById('qrcode').innerHTML = qr.createImgTag();
</script>
<div id="qrcode"></div>
PHP용 라이브러리
PHP QR Code

GitHub: PHP QR Code
PHP에서 QR 코드를 생성할 수 있으며, 다양한 포맷과 크기 설정이 가능합니다.
사용 예시:
php
코드 복사
<?php
include('path/to/phpqrcode/qrlib.php');

$tempDir = "temp/";
$codeContents = 'https://www.example.com';
$fileName = 'qrcode.png';
$pngAbsoluteFilePath = $tempDir.$fileName;

QRcode::png($codeContents, $pngAbsoluteFilePath, QR_ECLEVEL_L, 10, 2);

echo '<img src="'.$pngAbsoluteFilePath.'" />';
?>
Endroid QR Code

GitHub: Endroid QR Code
Composer를 통해 설치 가능하며, 다양한 커스터마이징 옵션을 제공합니다.<?php
require 'vendor/autoload.php';

use Endroid\QrCode\QrCode;
use Endroid\QrCode\Writer\PngWriter;

$qrCode = QrCode::create('https://www.example.com')
    ->setSize(300) // DPI 설정 가능
    ->setMargin(10);

$writer = new PngWriter();
$writer->write($qrCode)->saveToFile(__DIR__.'/qrcode.png');

echo '<img src="qrcode.png" />';
?>
위의 라이브러리들을 사용하여 300DPI 이상의 QR 코드를 쉽게 생성할 수 있습니다. 필요에 따라 다양한 옵션을 설정해보세요.

<?php 
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");  
$title_message = '출고 통계'; 

if (!isset($_SESSION["level"]) || $_SESSION["level"] > 5) {
    sleep(1);
    header("Location:" . $WebSite . "login/login_form.php"); 
    exit;
}       
include $_SERVER['DOCUMENT_ROOT'] . '/load_header.php';   
?>
<title> <?=$title_message?> </title>
<link href="css/style.css" rel="stylesheet" >   
<style>
#viewTable th, td{
border : 1px #aaaaaa solid ;
}

</style>
</head>
<body>
<input id="text" type="text"  style="width:80%" /> <br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100
});

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>
<script>
// 페이지 로딩
$(document).ready(function(){    
    var loader = document.getElementById('loadingOverlay');
    loader.style.display = 'none';
});
</script>
</body>
위의 코드를 부트스트랩 5.3 기준으로 화면에 입력창이 있고, '생성'버튼을 누르면 QR코드가 바퀴는 버튼과 '저장'버튼을 누르면 다운로드 되게 프로그램을 수정해줘.

이미 load_header.php에 모든 라이브러리 생성코드가 있어서,
body 아래의 코드만 만들어주면 된다.

ChatGPT
아래는 부트스트랩 5.3을 기준으로 입력창, '생성' 버튼, '저장' 버튼을 추가한 프로그램입니다. 입력된 텍스트로 QR 코드를 생성하고, '저장' 버튼을 누르면 QR 코드를 다운로드할 수 있도록 수정한 코드입니다.

html
코드 복사
<body>
<div class="container">
    <div class="row mt-5">
        <div class="col-md-6 offset-md-3">
            <div class="mb-3">
                <label for="text" class="form-label">텍스트 입력</label>
                <input id="text" type="text" class="form-control" placeholder="텍스트를 입력하세요" />
            </div>
            <button id="generate-btn" class="btn btn-primary">생성</button>
            <button id="save-btn" class="btn btn-success">저장</button>
            <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
    width : 100,
    height : 100
});

function makeCode() {        
    var elText = document.getElementById("text");
    
    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }
    
    qrcode.makeCode(elText.value);
}

document.getElementById("generate-btn").addEventListener("click", function() {
    makeCode();
});

document.getElementById("text").addEventListener("keydown", function(e) {
    if (e.keyCode === 13) {
        makeCode();
    }
});

document.getElementById("save-btn").addEventListener("click", function() {
    var canvas = document.querySelector("#qrcode canvas");
    var img = canvas.toDataURL("image/png");
    var link = document.createElement("a");
    link.href = img;
    link.download = "qrcode.png";
    link.click();
});
</script>

<script>
// 페이지 로딩
$(document).ready(function(){    
    var loader = document.getElementById('loadingOverlay');
    loader.style.display = 'none';
});
</script>

</body>
위의 코드에서는 다음과 같은 작업을 수행했습니다:

입력창과 버튼 추가: 부트스트랩 5.3을 사용하여 입력창, '생성' 버튼, '저장' 버튼을 추가했습니다.
QR 코드 생성: '생성' 버튼을 누르거나 엔터 키를 누르면 QR 코드를 생성하도록 이벤트 리스너를 설정했습니다.
QR 코드 다운로드: '저장' 버튼을 누르면 QR 코드 이미지를 다운로드할 수 있도록 기능을 추가했습니다.
이 코드를 사용하면 입력창에 텍스트를 입력한 후 '생성' 버튼을 클릭하면 QR 코드가 생성되고, '저장' 버튼을 클릭하면 생성된 QR 코드를 다운로드할 수 있습니다.

반응형
저작자표시 비영리 변경금지

'IT tech Coding > javascript' 카테고리의 다른 글

DataTables 초기 설정시 화면의 상단에 아이템수와 검색창 없애고 나오기  (0) 2024.07.17
html input에서 포커스를 받을때 팝업창을 띄우고 다시 포커스를 얻을때까지 팝업창이 뜨지 않게 하는 코드  (0) 2024.07.04
Uncaught TypeError: Cannot read properties of null  (0) 2024.06.15
부트스트랩의 title 기능을 이용해서 td 요소에도 title 기능을 이용해서 좀 멋진 title을 만들고 싶다.  (0) 2024.05.16
처음 겪어본 Failed to load resource: net::ERR_CERT_DATE_INVALID 오류에 대한 대처방법  (0) 2024.05.03
댓글