Công cụ tạo mã QR miễn phí, mã nguồn mở với nhiều tùy chọn tùy chỉnh
Tạo QR code cho nhiều mục đích khác nhau:
- URL - Liên kết website
- Plain Text - Văn bản thuần
- Email - Địa chỉ email
- Phone - Số điện thoại
- SMS - Tin nhắn SMS
- WiFi Login - Thông tin đăng nhập WiFi
- WhatsApp - Số WhatsApp
- YouTube - Kênh/Video YouTube
- Instagram - Tài khoản Instagram
- LinkedIn - Profile LinkedIn
- Facebook - Trang Facebook
- X (Twitter) - Tài khoản X
- Discord - Server/User Discord
- Telegram - Tài khoản Telegram
- TikTok - Tài khoản TikTok
- Spotify - Playlist/Artist Spotify
- 📏 Kích thước QR - Tùy chỉnh size từ 100px đến 1000px (khuyến nghị: 200-500px cho web, 300-800px cho in ấn)
- 📷 Logo tùy chỉnh - Upload ảnh logo để đặt ở giữa QR code (khuyến nghị: ảnh vuông 1:1, tối thiểu 200x200px)
- ✏️ Text tùy chỉnh - Thêm text với màu sắc tùy chọn
- 🌈 Màu sắc - Tùy chỉnh màu QR và màu nền với kiểm tra độ tương phản
- 📊 Google Campaign Tracking - Tự động thêm tham số UTM cho marketing
- ⚡ Smart Validation - Validate khi blur/nhấn Enter, không làm phiền khi đang gõ
- 🌙 Dark Mode - Tự động nhận diện theo hệ thống hoặc chọn thủ công
- 🌐 Đa ngôn ngữ - Tiếng Việt & English (100% i18n)
- 💾 Export đa dạng - PNG, SVG, PDF (bao gồm logo/text)
- 🐛 Error Reporting - Hệ thống báo lỗi tích hợp, tracking user activities
- ✅ Miễn phí 100% - Không giới hạn số lượng QR code
- ✅ Bảo mật - Xử lý hoàn toàn trên trình duyệt, không lưu trữ dữ liệu
- ✅ Không cần cài đặt - Chạy trực tiếp trên trình duyệt
- ✅ Responsive - Hoạt động tốt trên desktop & mobile
- ✅ Mobile Optimized - Download & preview QR tối ưu cho điện thoại
- ✅ Icon Fallback - Emoji fallback nếu CDN bị chặn
- ✅ Open Source - Mã nguồn mở, có thể tùy chỉnh
Live Demo: https://j2teamnnl.github.io/qr-code-generator
Không còn step wizard phức tạp, tất cả trên 1 trang:
-
Chọn loại dữ liệu
- Click vào 1 trong các card: URL, Text, Email, WhatsApp, Instagram, v.v.
-
Nhập thông tin
- Điền thông tin tương ứng vào form
- VD: URL, email, số điện thoại, username, v.v.
-
Tùy chỉnh (tuỳ chọn)
- Chọn màu sắc QR code và background
- Thêm logo (auto-crop vuông 1:1) hoặc text ở giữa
- Bật UTM tracking cho URL marketing
-
Live Preview
- QR code tự động hiển thị khi bạn nhập/thay đổi thông tin
- Không cần bấm nút Generate - tự động update!
-
Download
- Chọn format: PNG, SVG, hoặc PDF
- Tải về máy tuỳ ý
- Nút "🐛 Báo Lỗi" floating ở góc phải màn hình
- Tự động tracking tất cả hành động của bạn
- Copy report và gửi qua GitHub Issues hoặc Messenger
| Công nghệ | Mục đích |
|---|---|
| HTML5 | Cấu trúc trang web |
| JavaScript (Vanilla) | Logic xử lý |
| Tailwind CSS | Styling & UI |
| QRCode.js | Thư viện tạo QR code |
| jsPDF | Export PDF |
qr-code-generator/
├── index.html # File HTML chính
├── js/
│ ├── app.js # Logic chính, event handlers
│ ├── qr-generator.js # QR generation & styling
│ ├── translations.js # Multi-language data
│ ├── utils.js # Theme, Language, Wizard controllers
│ └── logger.js # Activity logger & error reporting
├── css/
│ └── style.css # Custom styles, responsive
├── package.json # Dependencies & scripts
├── .eslintrc.json # ESLint config
├── .prettierrc.json # Prettier config
├── README.md # Tài liệu
├── CHANGELOG.md # Lịch sử thay đổi
├── TODO.md # Pending tasks
└── LICENSE # MIT License
# Clone repository
git clone https://github.com/j2teamnnl/qr-code-generator.git
cd qr-code-generator
# Install dependencies
npm install# Run ESLint
npm run lint
# Auto-fix ESLint errors
npm run lint:fix
# Format code with Prettier
npm run format
# Run all checks
npm run check- ESLint: Kiểm tra lỗi code, coding standards
- Prettier: Auto-format code theo chuẩn
- Config files:
.eslintrc.json,.prettierrc.json - Chạy
npm run lint:fixtrước khi commit
Chúng tôi rất hoan nghênh mọi đóng góp!
Dự án này được phân phối dưới MIT License - xem file LICENSE để biết thêm chi tiết.
- Windsurf - Claude Sonnet
- QRCode.js - Thư viện tạo QR code
- Tailwind CSS - CSS framework
- Tất cả contributors đã đóng góp cho dự án
⭐ Nếu thấy hữu ích, hãy star repo này! ⭐
Vibe code with ❤️ by J2TeamNNL