สร้าง qr code ในเว็บตัวเอง ทำอย่างไร

junjao · October 08, 2025, 01:27:03 PM

ดีมากครับ คำถามนี้เจาะจงดี 👍
การ **สร้าง QR Code ในเว็บของตัวเอง** ทำได้หลายวิธี — ขึ้นอยู่กับว่าคุณอยากให้มันเป็น
1️⃣ **QR Code แบบคงที่ (Static)** — แสดงลิงก์หรือข้อความคงที่
2️⃣ **QR Code แบบไดนามิก (Dynamic)** — สร้างเปลี่ยนได้ตามข้อมูล เช่น ลิงก์ผู้ใช้, ข้อมูลสินค้าฯ

---

## 🔹 วิธีที่ 1: ใช้ JavaScript Library (ง่ายสุด)

### ตัวอย่างใช้ `qrcodejs`

📦 ดาวน์โหลดหรือใช้ CDN ก็ได้เลย

```html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>สร้าง QR Code</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body style="text-align:center; margin-top:50px;">
<h2>ตัวอย่าง QR Code</h2>
<div id="qrcode"></div>

<script>
// สร้าง QR Code
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "https://your-website.com",
width: 200,
height: 200,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</body>
</html>
```

✅ ผลลัพธ์: QR Code จะถูกสร้างขึ้นกลางหน้าเว็บทันที
คุณเปลี่ยนค่า `"https://your-website.com"` เป็นอะไรก็ได้ เช่น เบอร์โทร, LINE ID, ข้อความ ฯลฯ

---

## 🔹 วิธีที่ 2: สร้าง QR Code ฝั่งเซิร์ฟเวอร์ (เช่น PHP / Python)

### ตัวอย่าง PHP ใช้ Google Chart API (ไม่ต้องติดตั้ง lib)

```php
<?php
$text = urlencode("https://your-website.com");
echo "<img src='https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=$text'; />";
?>
```

---

## 🔹 วิธีที่ 3: ถ้าใช้ Framework เช่น React / Vue / Node.js

สามารถใช้ npm package เช่น

```bash
npm install qrcode
```

แล้วในโค้ด:

```javascript
import QRCode from 'qrcode'

QRCode.toDataURL('https://your-website.com')
.then(url => {
console.log(url) // base64 image
})
```

---

## 🔹 วิธีที่ 4: ให้ผู้ใช้พิมพ์ข้อความแล้วเว็บสร้าง QR ให้เลย

```html
<input type="text" id="text" placeholder="กรอกข้อความ...">
<button onclick="makeQR()">สร้าง QR</button>
<div id="qrcode"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
function makeQR() {
var text = document.getElementById("text").value;
document.getElementById("qrcode").innerHTML = ""; // ล้างเก่า
new QRCode(document.getElementById("qrcode"), text);
}
</script>
```

---------------------------------------------

<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>สร้าง QR Code ขั้นโปร</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
min-height: 100vh;
padding-top: 40px;
background: #f4f6f8;
color: #333;
}
h2 {
margin-bottom: 20px;
}
input, select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
margin: 5px;
width: 250px;
}
#qrcode {
margin-top: 20px;
background: white;
padding: 10px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
position: relative;
}
button {
padding: 10px 20px;
margin-top: 10px;
border: none;
background-color: #2563eb;
color: white;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: 0.2s;
}
button:hover {
background-color: #1e40af;
}
#downloadBtn, #pdfBtn {
display: none;
margin-top: 10px;
}
#downloadBtn {
background-color: #16a34a;
}
#downloadBtn:hover {
background-color: #15803d;
}
#pdfBtn {
background-color: #dc2626;
}
#pdfBtn:hover {
background-color: #991b1b;
}
</style>
</head>
<body>
<h2>สร้าง QR Code ขั้นโปร</h2>

<input type="text" id="text" placeholder="พิมพ์ข้อความหรือ URL...">

<label>เลือกสี:</label>
<input type="color" id="colorPicker" value="#000000">

<label>อัปโหลดโลโก้ (ไม่บังคับ):</label>
<input type="file" id="logoInput" accept="image/*">

<button onclick="generateQR()">สร้าง QR Code</button>

<div id="qrcode"></div>

<button id="downloadBtn" onclick="downloadQR()">ดาวน์โหลด PNG</button>
<button id="pdfBtn" onclick="downloadPDF()">บันทึกเป็น PDF</button>

<script>
let logoDataURL = null;

// อ่านไฟล์โลโก้
document.getElementById("logoInput").addEventListener("change", function(event) {
const file = event.target.files

;

if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
logoDataURL = e.target.result;
};
reader.readAsDataURL(file);
});

// สร้าง QR
function generateQR() {
const text = document.getElementById('text').value.trim();
const color = document.getElementById('colorPicker').value;
const qrContainer = document.getElementById('qrcode');
const downloadBtn = document.getElementById('downloadBtn');
const pdfBtn = document.getElementById('pdfBtn');

if (!text) {
alert("กรุณากรอกข้อความหรือ URL ก่อนครับ");
return;
}

qrContainer.innerHTML = "";

// สร้าง QR ด้วยสีที่เลือก
const qrCode = new QRCode(qrContainer, {
text: text,
width: 250,
height: 250,
colorDark: color,
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});

setTimeout(() => {
const qrImg = qrContainer.querySelector("img") || qrContainer.querySelector("canvas");
if (logoDataURL && qrImg) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const size = 250;
canvas.width = size;
canvas.height = size;

const img = new Image();
img.src = qrImg.src;
img.onload = () => {
ctx.drawImage(img, 0, 0, size, size);

// ใส่โลโก้ตรงกลาง
const logo = new Image();
logo.src = logoDataURL;
logo.onload = () => {
const logoSize = size * 0.2; // 20%
const x = (size - logoSize) / 2;
const y = (size - logoSize) / 2;
ctx.drawImage(logo, x, y, logoSize, logoSize);

qrContainer.innerHTML = "";
const finalImg = new Image();
finalImg.src = canvas.toDataURL("image/png");
qrContainer.appendChild(finalImg);
};
};
}
}, 500);

downloadBtn.style.display = "inline-block";
pdfBtn.style.display = "inline-block";
}

// ดาวน์โหลด PNG
function downloadQR() {
const img = document.querySelector("#qrcode img");
if (img) {
const link = document.createElement("a");
link.href = img.src;
link.download = "qrcode.png";
link.click();
}
}

// ดาวน์โหลด PDF
async function downloadPDF() {
const { jsPDF } = window.jspdf;
const img = document.querySelector("#qrcode img");
if (!img) return alert("ยังไม่มี QR Code ให้ดาวน์โหลดครับ");

const pdf = new jsPDF({
orientation: "portrait",
unit: "mm",
format: "a4"
});

pdf.setFontSize(18);
pdf.text("QR Code ของคุณ", 80, 20);
pdf.addImage(img.src, "PNG", 50, 40, 100, 100);
pdf.save("qrcode.pdf");
}
</script>
</body>
</html>
---------------------------------------------------

สุดยอดครับ! 🔥
นี่คือตัวอย่าง **เว็บหน้าเดียว (HTML + JS)** เวอร์ชัน **ขั้นโปร** ที่สามารถ

✅ พิมพ์ข้อความหรือ URL
✅ สร้าง QR Code
✅ ใส่ "โลโก้ตรงกลาง"
✅ เปลี่ยนสี QR ได้
✅ ดาวน์โหลดเป็น **PNG หรือ PDF**

---

## 🔹 ตัวอย่างโค้ดพร้อมใช้งาน

บันทึกเป็นไฟล์ `qrcode-pro.html` แล้วเปิดในเบราว์เซอร์ได้เลย

```html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>สร้าง QR Code ขั้นโปร</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
min-height: 100vh;
padding-top: 40px;
background: #f4f6f8;
color: #333;
}
h2 {
margin-bottom: 20px;
}
input, select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
margin: 5px;
width: 250px;
}
#qrcode {
margin-top: 20px;
background: white;
padding: 10px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
position: relative;
}
button {
padding: 10px 20px;
margin-top: 10px;
border: none;
background-color: #2563eb;
color: white;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: 0.2s;
}
button:hover {
background-color: #1e40af;
}
#downloadBtn, #pdfBtn {
display: none;
margin-top: 10px;
}
#downloadBtn {
background-color: #16a34a;
}
#downloadBtn:hover {
background-color: #15803d;
}
#pdfBtn {
background-color: #dc2626;
}
#pdfBtn:hover {
background-color: #991b1b;
}
</style>
</head>
<body>
<h2>สร้าง QR Code ขั้นโปร</h2>

<input type="text" id="text" placeholder="พิมพ์ข้อความหรือ URL...">

<label>เลือกสี:</label>
<input type="color" id="colorPicker" value="#000000">

<label>อัปโหลดโลโก้ (ไม่บังคับ):</label>
<input type="file" id="logoInput" accept="image/*">

<button onclick="generateQR()">สร้าง QR Code</button>

<div id="qrcode"></div>

<button id="downloadBtn" onclick="downloadQR()">ดาวน์โหลด PNG</button>
<button id="pdfBtn" onclick="downloadPDF()">บันทึกเป็น PDF</button>

<script>
let logoDataURL = null;

// อ่านไฟล์โลโก้
document.getElementById("logoInput").addEventListener("change", function(event) {
const file = event.target.files

;

if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
logoDataURL = e.target.result;
};
reader.readAsDataURL(file);
});

// สร้าง QR
function generateQR() {
const text = document.getElementById('text').value.trim();
const color = document.getElementById('colorPicker').value;
const qrContainer = document.getElementById('qrcode');
const downloadBtn = document.getElementById('downloadBtn');
const pdfBtn = document.getElementById('pdfBtn');

if (!text) {
alert("กรุณากรอกข้อความหรือ URL ก่อนครับ");
return;
}

qrContainer.innerHTML = "";

// สร้าง QR ด้วยสีที่เลือก
const qrCode = new QRCode(qrContainer, {
text: text,
width: 250,
height: 250,
colorDark: color,
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});

setTimeout(() => {
const qrImg = qrContainer.querySelector("img") || qrContainer.querySelector("canvas");
if (logoDataURL && qrImg) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const size = 250;
canvas.width = size;
canvas.height = size;

const img = new Image();
img.src = qrImg.src;
img.onload = () => {
ctx.drawImage(img, 0, 0, size, size);

// ใส่โลโก้ตรงกลาง
const logo = new Image();
logo.src = logoDataURL;
logo.onload = () => {
const logoSize = size * 0.2; // 20%
const x = (size - logoSize) / 2;
const y = (size - logoSize) / 2;
ctx.drawImage(logo, x, y, logoSize, logoSize);

qrContainer.innerHTML = "";
const finalImg = new Image();
finalImg.src = canvas.toDataURL("image/png");
qrContainer.appendChild(finalImg);
};
};
}
}, 500);

downloadBtn.style.display = "inline-block";
pdfBtn.style.display = "inline-block";
}

// ดาวน์โหลด PNG
function downloadQR() {
const img = document.querySelector("#qrcode img");
if (img) {
const link = document.createElement("a");
link.href = img.src;
link.download = "qrcode.png";
link.click();
}
}

// ดาวน์โหลด PDF
async function downloadPDF() {
const { jsPDF } = window.jspdf;
const img = document.querySelector("#qrcode img");
if (!img) return alert("ยังไม่มี QR Code ให้ดาวน์โหลดครับ");

const pdf = new jsPDF({
orientation: "portrait",
unit: "mm",
format: "a4"
});

pdf.setFontSize(18);
pdf.text("QR Code ของคุณ", 80, 20);
pdf.addImage(img.src, "PNG", 50, 40, 100, 100);
pdf.save("qrcode.pdf");
}
</script>
</body>
</html>
```

---

## 🔹 ฟีเจอร์ในหน้านี้

| ฟีเจอร์ | รายละเอียด |
| -------------------- | ----------------------------------- |
| 🧾 กรอกข้อความ / URL | ระบบจะสร้าง QR อัตโนมัติ |
| 🎨 เปลี่ยนสี QR | เลือกสีได้เองด้วย color picker |
| 🖼� ใส่โลโก้กลาง QR | อัปโหลดไฟล์รูป (PNG, JPG) ได้ |
| 📸 ดาวน์โหลด PNG | บันทึกภาพ QR |
| 📄 บันทึกเป็น PDF | บันทึก QR ลงไฟล์ PDF พร้อมหัวเรื่อง |

-----------------------------
ใช้งานจริงได้ที่ https://junjao.com/qrcode.html

junjao · October 08, 2025, 01:27:03 PM

จั่นเจาดอทคอม ถามตอบ คอมพิวเตอร์ อินเตอร์เน็ต Forex MT4 MT5 เทรดทอง

News:

สร้าง qr code ในเว็บตัวเอง ทำอย่างไร

junjao

junjao