วิธีสร้าง QR Code แบบทีละขั้นตอน
(nayuki.io)กระบวนการสร้าง QR Code แบบทีละขั้นตอน
เดโมแอปพลิเคชัน JavaScript นี้แสดงภาพอย่างละเอียดของกระบวนการที่สตริงข้อความถูกเข้ารหัสเป็นสัญลักษณ์บาร์โค้ด QR Code เนื้อหาในหน้านี้อธิบายและให้เหตุผลว่าภายในไลบรารีตัวสร้าง QR Code ทำงานอย่างไร
อินพุตของผู้ใช้
- สตริงข้อความ: "Hello world"
- ระดับการแก้ไขข้อผิดพลาด: ต่ำ, ปานกลาง, ควอไทล์, สูง
- บังคับเวอร์ชันขั้นต่ำ: 1 ถึง 40
- บังคับรูปแบบมาสก์: อัตโนมัติ (-1) หรือกำหนดเอง (0 ถึง 7)
เอาต์พุต QR Code
กระบวนการแบบทีละขั้นตอน
0. วิเคราะห์อักขระ Unicode
- จำนวนโค้ดพอยต์ของสตริงข้อความอินพุต: 17
- รายละเอียดของอักขระแต่ละตัว:
- ดัชนี, อักขระ, โค้ดพอยต์ Unicode, สามารถเข้ารหัสได้หรือไม่ในโหมดตัวเลข, โหมดตัวอักษร, โหมดไบต์, โหมดคันจิ
1. สร้างเซกเมนต์ข้อมูล
- แปลงอักขระแต่ละตัวเป็นบิต
- ในโหมดไบต์ อักขระจะสร้าง 8, 16, 24, 32 บิต
- เซกเมนต์เดี่ยวที่สร้างขึ้น:
- โหมด: ไบต์
- จำนวน: 17 ไบต์
- ข้อมูล: ความยาว 136 บิต
2. ปรับให้เข้ากับหมายเลขเวอร์ชัน
- ความยาวบิตรวมที่ต้องใช้เพื่อแสดงรายการเซกเมนต์
- ความจุ data codeword ของ QR Code ตามเวอร์ชันและระดับการแก้ไขข้อผิดพลาด
3. เชื่อมต่อเซกเมนต์ เพิ่มแพดดิ้ง และสร้างโค้ดเวิร์ด
- รวมสตริงบิตหลายแบบเข้าด้วยกัน
- โหมดเซกเมนต์, จำนวนอักขระ, ข้อมูล, terminator, bit padding, byte padding
4. แบ่งบล็อก เพิ่ม ECC และทำ interleave
- สถิติสำหรับทุกบล็อก
- แบ่ง data codeword เป็นบล็อกสั้นและบล็อกยาว จากนั้นคำนวณและเพิ่ม ECC codeword
5. วาดแพตเทิร์นคงที่
- วาดแพตเทิร์น timing แนวนอนและแนวตั้ง
- วาดแพตเทิร์น finder ที่มุมทั้งสาม
- วาดกริดของแพตเทิร์น alignment
- วาดบิตฟอร์แมตชั่วคราว
- วาดบล็อกข้อมูลเวอร์ชัน
6. วาดโค้ดเวิร์ดและส่วนที่เหลือ
- คำนวณการสแกนแบบซิกแซกเพื่อเข้าถึงทุกโมดูลที่ยังไม่ถูกเติม
- วาดโมดูลข้อมูล/ECC ตามลำดับการสแกนแบบซิกแซกและค่าบิตของโค้ดเวิร์ด
7. ลองใช้แต่ละมาสก์
- ใช้รูปแบบมาสก์
- ใช้ mask XOR กับโมดูลข้อมูล, ECC และโมดูลส่วนที่เหลือ
- วาดบิตฟอร์แมตจริง
8. ค้นหาแพตเทิร์นที่มีบทลงโทษ
- ลำดับโมดูลแนวนอนและแนวตั้งที่มีสีเดียวกัน
- กล่องโมดูลสีเดียวกันขนาด 2×2
- แพตเทิร์น finder แนวนอนและแนวตั้ง
- ความสมดุลของโมดูลมืด/สว่าง
9. คำนวณคะแนนบทลงโทษ เลือกมาสก์ที่ดีที่สุด
- วิธีคำนวณคะแนนบทลงโทษ
- คะแนนบทลงโทษรวมต่ำสุด: รูปแบบมาสก์ 3
ข้อมูลเพิ่มเติม
- มีลิงก์ไปยัง Wikipedia และแหล่งข้อมูลอื่นเกี่ยวกับการออกแบบ QR Code
สามารถดูซอร์สโค้ด TypeScript และโค้ด JavaScript ที่คอมไพล์แล้วของเว็บแอปพลิเคชันนี้ได้
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
น่าเสียดายที่คำอธิบายออนไลน์เกี่ยวกับ QR code มักละการคำนวณ Reed-Solomon error code
มีวิดีโอของ Veritasium เกี่ยวกับ QR code ชื่อ "I used to hate QR codes. But they're actually genius"
ฟีดแบ็กที่ผู้เขียนได้รับน่าสนใจดี
อยากเห็นคำอธิบายลักษณะคล้ายกันเกี่ยวกับ QR code decoder ด้วย
เคยเขียน implementation ของ QR code ด้วย Rust
การใส่ปีไว้ในชื่อบทความเป็นแนวปฏิบัติที่ดี (กรณีนี้คือปี 2018)
การเรียนรู้ว่า QR code ทำงานอย่างไรอยู่ในรายการสิ่งที่อยากทำมานาน และบทความนี้ก็เป็นบทนำที่ดี
อยากสร้าง QR code อย่างรวดเร็ว แต่เจอปัญหาจากเว็บที่มีโฆษณาเยอะและเว็บที่บังคับให้ "สมัครสมาชิกก่อนใช้"
อาจเพิ่มตัวเลือกได้มากกว่านี้ แต่คิดว่าผู้ใช้ส่วนใหญ่คงไม่จำเป็นต้องใช้
ตอนนี้พอเข้าใจการทำงานของ QR code แล้ว ก็สามารถใช้ใน SQL query ได้ด้วย