Tạo mã QR Code trong nodejs với qrcode
QR Code là gì?
QR Code (Quick Response Code) là dạng mã vạch hai chiều có thể được đọc bởi một máy đọc mã vạch hay smartphone có chức năng quét mã vạch, hay thông qua ứng dụng của bên thứ 3 (zalo, facebook, …). Mã QR là một biểu tượng hai chiều, nó được phát minh vào năm 1994 bởi công ty Denso Wave (Nhật Bản). Thông tin thêm các bạn có thể xem tại đây
Tạo QR code với qrcode
Cài đặt thư viện qrcode
Đầu tiên chúng ta cần tạo mới một project. Và cài đặt thư viện express trên comand line với lệnh
npm install express –save
Tiếp theo chúng ta sử dụng lệnh sau trên command line để cài đặt thư viện qrcode
npm install qrcode –save
Hoặc bạn có thể cài đặt global với lệnh
npm install -g qrcode
Sử dụng thư viện qrcode
Bạn có thể tạo được một mã QR đơn giản với một vài dòng code như sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> QRCode <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'qrcode'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">,</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> <span class="token keyword">let</span> img<span class="token operator">=</span><span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">let</span> qr<span class="token operator">=</span> <span class="token keyword">await</span> QRCode<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span><span class="token string">'I am Cuamotcang!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>qr<span class="token punctuation">)</span><span class="token punctuation">;</span> img <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><image src= " </span><span class="token template-punctuation string">`</span></span><span class="token operator">+</span>qr<span class="token operator">+</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">" /></span><span class="token template-punctuation string">`</span></span> <span class="token keyword">return</span> res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"app is running at port 3000"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Ví dụ trên mình đang tạo mã QR cho câu ‘I am Cuamotcang’. Khi truy cập vào địa chỉ http://localhost:3000/ bạn sẽ thấy kết quả như sau. Bạn có thể lấy điện thoại ra để quét thử nhé!
Ngoài ra thông tin mã QR được in ra trong comand line bởi câu lệnh console.log(qr) ở trên sẽ như thế này:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAAAklEQVR4AewaftIAAAOPSURBVO3BQY4jSQIDQWdA//+ybx/mwFMACUk1Nb00i38w84/DTDnMlMNMOcyUw0w5zJTDTDnMlMNMOcyUw0w5zJTDTDnMlMNMefGmJPwklXck4ZNUbpLwk1TecZgph5lymCkvPkzlk5LwSSo3SXgiCU3lRuWTkvBJh5lymCmHmfLiy5LwhMoTSWgqLQk3KjcqLQlN5R1JeELlmw4z5TBTDjPlxV8mCU2lJaEloam0JPw/OcyUw0w5zJQXfxmVG5WWhBuVloSWhKbyX3aYKYeZcpgpL75M5Scl4ZtUPknlNznMlMNMOcyUFx+WhH+TSktCU2lJuElCU2lJaCo3SfjNDjPlMFMOM+XFm1R+kyTcJOEnqfyXHGbKYaYcZkr8gzckoam0JHySyk0SnlD5piR8kso3HWbKYaYcZkr8gy9KQlNpSbhRaUloKjdJaCo3SXhC5YkkNJWWhKbykw4z5TBTDjPlxb9M5SYJTyShqdwk4R1JuFF5QuUmCTcq7zjMlMNMOcyUFx+WhKZyk4QblSdUbpLQVFoSmspNEt6RhKZyo9KS8EmHmXKYKYeZ8uJNSWgqLQlN5UalJaGp3CShqdwkoam0JNyotCS0JDSVloSWhBuVbzrMlMNMOcyUF7+cSktCU3lC5QmVmyTcqLQkNJWbJNyofNJhphxmymGmvPhlkvBEEprKTRJuVG6S0FRaEloS3qFyk4Sm8o7DTDnMlMNMefHLqNwk4SYJTeVG5SYJTaUloam0JDSVmyQ0lZaEbzrMlMNMOcyUFz8sCU8koancJOGTVJ5Iwk0SnkhCU/mmw0w5zJTDTIl/8B+WhKbSktBUWhI+SeWJJNyo3CShqbzjMFMOM+UwU168KQk/SaWptCQ8odKScKPSknCThKbyjiR802GmHGbKYaa8+DCVT0rCTRKaSkvCTRJuVN6h8oTKEyqfdJgph5lymCkvviwJT6h8ksoTKi0JTyThHUloKj/pMFMOM+UwU178ZZLQVG5UblSeSMKNSkvCEyotCU3lHYeZcpgph5ny4i+j0pLwhMpNEppKU7lJQlO5SUJT+abDTDnMlMNMefFlKt+kcqPSktBUbpJwk4Sm0pLwDpWfdJgph5lymCkvPiwJPykJTaUl4R0qTyShqbQkPJGEn3SYKYeZcpgp8Q9m/nGYKYeZcpgph5lymCmHmXKYKYeZcpgph5lymCmHmXKYKYeZcpgp/wPa0IYoBgikYgAAAABJRU5ErkJggg==
Ngoài dạng Data URI ra thì qrcode còn hỗ trợ tạo mã qrcode với các dạng khác nhau như: String (toString), canvas (toCanvas), file (toFile), file stream (toFileStream). Sau đây là ví dụ tạo mã QR dưới dạng file:
1 2 3 4 5 | app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">,</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> <span class="token keyword">await</span> QRCode<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span><span class="token string">'cmc.png'</span><span class="token punctuation">,</span> <span class="token string">'I am Cuamotcang!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Và đây là kết quả thu được truy cập http://localhost:3000/. Một file hình mới có tên cmc.png đã được tạo
qrcode option
qrcode hỗ trợ 4 kiểu ký tự đầu vào khác nhau, và với mỗi loại thì sẽ tương ứng với số ký tự tối đa có thể mã hóa được.
| Kiểu dữ liệu | Loại ký tự | Khả năng mã hóa |
|---|---|---|
| Số đơn thuần | 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 | Tối đa 7.089 ký tự |
| Số và chữ | 0–9, A–Z (upper-case only), space, $, % , +, -, … | Tối đa 4.296 ký tự |
| Số nhị phân (8bit) | Ký tự từ bộ JIS X 0208 | Tối đa 2.953 byte |
| Kanji/Kana | Ký tự từ bộ ISO/IEC 8859-1 | Tối đa 1.817 ký tự |
Ta cũng có thể trộn các kiểu mã hóa lại với nhau như trong ví dụ dưới đây:
1 2 3 4 5 6 7 8 9 10 11 | app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">,</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> <span class="token keyword">let</span> img<span class="token operator">=</span><span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">const</span> segs <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'CUAMOTCANG'</span><span class="token punctuation">,</span> mode<span class="token operator">:</span> <span class="token string">'alphanumeric'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'123'</span><span class="token punctuation">,</span> mode<span class="token operator">:</span> <span class="token string">'numeric'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token keyword">let</span> qr<span class="token operator">=</span> <span class="token keyword">await</span> QRCode<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span>segs<span class="token punctuation">)</span><span class="token punctuation">;</span> img <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><image src= " </span><span class="token template-punctuation string">`</span></span><span class="token operator">+</span>qr<span class="token operator">+</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">" /></span><span class="token template-punctuation string">`</span></span> <span class="token keyword">return</span> res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Ngoài ra chúng ta cũng có thể thay đổi màu sắc, kích thước, đuôi file, … của mã QR được tạo ra. Chi tiết xem tại đây. Dưới đây là một ví dụ minh họa:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">,</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span>res</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> <span class="token keyword">let</span> img<span class="token operator">=</span><span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">const</span> segs <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'CUAMOTCANG'</span><span class="token punctuation">,</span> mode<span class="token operator">:</span> <span class="token string">'alphanumeric'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token string">'123'</span><span class="token punctuation">,</span> mode<span class="token operator">:</span> <span class="token string">'numeric'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token keyword">let</span> qr<span class="token operator">=</span> <span class="token keyword">await</span> QRCode<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span>segs<span class="token punctuation">,</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token punctuation">{</span> dark<span class="token operator">:</span> <span class="token string">'#00F'</span><span class="token punctuation">,</span> light<span class="token operator">:</span> <span class="token string">'#0000'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> width<span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> margin<span class="token operator">:</span><span class="token number">10</span><span class="token punctuation">,</span> scale<span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> img <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><image src= " </span><span class="token template-punctuation string">`</span></span><span class="token operator">+</span>qr<span class="token operator">+</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">" /></span><span class="token template-punctuation string">`</span></span> <span class="token keyword">return</span> res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Lời kết
Đây là bài viết đầu tay của mình, hy vọng mọi người thích bài viết này. Trong bài viết còn có nhiều thiếu sót. Mong mọi người góp ý thêm ạ. Cám ơn mọi người đã đọc bài viết này.
Tham khảo
https://www.npmjs.com/package/qrcode