إنشاء رموز QR باستخدام JavaScript
JavaScript هي اللغة الأكثر شيوعاً لتطوير الويب. استخدم مكتبات مثل qrcode.js أو qr-code-styling لإنشاء رموز QR في المتصفح أو Node.js، أو استدعِ واجهة QRCode.fun API للتنسيق المتقدم.
التثبيت
قم بتثبيت مكتبات JavaScript لرمز QR باستخدام مدير الحزم المفضل لديك.
npm install qrcodeyarn add qrcodenpm install qr-code-stylingإنشاء رموز QR بمكتبات JavaScript
إليك أمثلة كود باستخدام مكتبات JavaScript الشائعة لرمز QR لإنشاء رموز QR في مشاريعك.
Basic QR Code (Node.js)
const QRCode = require('qrcode')
// Generate QR code as data URL
const dataUrl = await QRCode.toDataURL('https://qrcode.fun')
console.log(dataUrl)
// Generate QR code as file
await QRCode.toFile('./qrcode.png', 'https://qrcode.fun', {
width: 300,
margin: 2,
color: {
dark: '#1A2B3C',
light: '#FFFFFF'
}
})Browser Canvas Rendering
import QRCode from 'qrcode'
const canvas = document.getElementById('canvas')
await QRCode.toCanvas(canvas, 'https://qrcode.fun', {
width: 256,
margin: 2,
color: {
dark: '#1A2B3C',
light: '#FFFFFF'
}
})Styled QR Code with Logo
import QRCodeStyling from 'qr-code-styling'
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
data: 'https://qrcode.fun',
image: '/logo.png',
dotsOptions: {
color: '#1A2B3C',
type: 'rounded'
},
cornersSquareOptions: {
color: '#8564C3',
type: 'extra-rounded'
},
backgroundOptions: {
color: '#FFFFFF'
}
})
qrCode.append(document.getElementById('qr-container'))
qrCode.download({ extension: 'png' })إنشاء رموز QR عبر API في JavaScript
استخدم واجهة QRCode.fun API لإنشاء رموز QR مُنسّقة بألوان وأشكال وشعارات مخصصة من تطبيق JavaScript الخاص بك.
// Using fetch (Browser or Node.js 18+)
const response = await fetch('https://qrcode.fun/api/generate-qr-styled', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
data: 'https://qrcode.fun',
width: 300,
height: 300,
type: 'png',
margin: 10,
dotsOptions: {
color: '#1A2B3C',
type: 'rounded'
},
cornersSquareOptions: {
color: '#8564C3',
type: 'extra-rounded'
},
backgroundOptions: {
color: '#FFFFFF'
}
})
})
const result = await response.json()
// result.data contains the base64 PNG data URL
console.log(result.data)معاينة رمز QR المباشرة
جرّب إنشاء رمز QR باستخدام JavaScript الآن.
المكتبة الأصلية مقابل API
مقارنة استخدام مكتبة JavaScript لرمز QR مباشرة مقابل واجهة QRCode.fun API.
| الميزة | المكتبة الأصلية | QRCode.fun API |
|---|---|---|
| تعقيد الإعداد | تثبيت الحزمة وتهيئة المُجمّع | طلب HTTP واحد |
| التخصيص | يختلف حسب المكتبة | تنسيق كامل: ألوان وأشكال وشعارات |
| دعم عدم الاتصال | نعم | يتطلب إنترنت |
| الصيانة | تحديث التبعيات يدوياً | محدّث دائماً |
| صيغ الإخراج | PNG, SVG (حسب المكتبة) | PNG, SVG |
حالات استخدام JavaScript لرمز QR
سيناريوهات شائعة يقوم فيها مطورو JavaScript بإنشاء رموز QR.
تطبيقات الويب
إنشاء رموز QR ديناميكياً في تطبيقات React و Vue و Angular أو تطبيقات JS العادية لمشاركة الروابط والمدفوعات والمصادقة.
خادم Node.js
إنشاء رموز QR من جانب الخادم للفواتير والتذاكر وملصقات الشحن ومرفقات البريد الإلكتروني التلقائية.
تطبيقات الويب التقدمية
إضافة إنشاء رموز QR إلى تطبيقات PWA للحصول على تجربة محمولة تعمل بدون اتصال مع رموز قابلة للمسح.
إضافات المتصفح
بناء إضافات Chrome أو Firefox لإنشاء رموز QR لرابط الصفحة الحالية أو النص المحدد.
نظرة معمقة على منظومة JavaScript لرموز QR
تمتلك JavaScript أغنى منظومة لرموز QR تشمل بيئات المتصفح والخادم والبيئات الهجينة.
تكامل React و Vue و Angular
تمتلك أطر العمل الحديثة مكونات مخصصة لتغليف رموز QR. react-qr-code لـ React، و vue-qrcode لـ Vue 3، و angularx-qrcode لـ Angular.
العرض من جانب الخادم و Next.js
يمكن لأطر SSR إنشاء رموز QR من جانب الخادم لتحسين SEO أو من جانب العميل للتفاعلية. واجهة QRCode.fun API تعمل من كلا البيئتين.
منظومة npm وحجم الحزمة
مكتبات بأحجام حزم مختلفة: qrcode حوالي 33KB، و qr-code-styling حوالي 65KB، و qrcode-generator أقل من 10KB.
الأسئلة الشائعة
أسئلة شائعة حول إنشاء رموز QR باستخدام JavaScript.
ابدأ بإنشاء رموز QR باستخدام JavaScript
استخدم مولدنا المجاني عبر الإنترنت لرموز QR السريعة، أو ادمج API في مشروع JavaScript الخاص بك للإنشاء التلقائي.