<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barcode in IMG Tag</title>
</head>
<body>
<!-- IMG tag to display the barcode -->
<img id="barcodeImage" alt="Barcode Image" />
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
<script>
// Function to generate the barcode and return it as a Base64 string
function generateBarcode(e = '11111112') {
var canvas = document.createElement('canvas');
JsBarcode(canvas, e, {
format: "CODE128",
lineColor: "#000",
width: 1,
height: 30,
displayValue: true,
fontSize: 16
});
return canvas.toDataURL("image/png"); // Return the Base64 string
}
// Get the Base64 string of the barcode
var barcodeImage = generateBarcode();
// Set the Base64 string as the src of the img element
document.getElementById('barcodeImage').src = barcodeImage;
</script>
</body>
</html>
การทำงานของโค้ด
1. สร้าง <canvas> ชั่วคราว
เราสร้างองค์ประกอบ <canvas> ที่จะใช้เพื่อเรนเดอร์บาร์โค้ด
2. เรนเดอร์บาร์โค้ดลงใน <canvas>
เราใช้ JsBarcode เพื่อสร้างบาร์โค้ดลงใน <canvas> แทน <svg> หรือองค์ประกอบ HTML อื่น ๆ
3. แปลงเป็น Base64
ใช้ canvas.toDataURL() เพื่อแปลงข้อมูลภาพใน <canvas> เป็นรูปแบบ Base64
คืนค่าหรือจัดเก็บในตัวแปร: เราสามารถคืนค่า Base64 string และเก็บไว้ในตัวแปรเพื่อใช้ในส่วนอื่นของโปรแกรมได้
ประโยชน์
คุณสามารถใช้ Base64 string นี้เพื่อฝังภาพบาร์โค้ดใน PDF, อีเมล, หรือหน้าเว็บอื่น ๆ ได้ง่าย