QRCode.Fun QRCode.Fun
ابدأ الآن
مكتبة JavaScript لرمز QR

إنشاء رموز QR باستخدام JavaScript

JavaScript هي اللغة الأكثر شيوعاً لتطوير الويب. استخدم مكتبات مثل qrcode.js أو qr-code-styling لإنشاء رموز QR في المتصفح أو Node.js، أو استدعِ واجهة QRCode.fun API للتنسيق المتقدم.

جرّب مولد QRعرض وثائق API

التثبيت

قم بتثبيت مكتبات JavaScript لرمز QR باستخدام مدير الحزم المفضل لديك.

npm
npm install qrcode
yarn
yarn add qrcode
npm (styled)
npm 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' })
QRCode.fun API

إنشاء رموز QR عبر API في JavaScript

استخدم واجهة QRCode.fun API لإنشاء رموز QR مُنسّقة بألوان وأشكال وشعارات مخصصة من تطبيق JavaScript الخاص بك.

تكامل JavaScript API
// 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 الآن.

معاينة QR

المكتبة الأصلية مقابل 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 لرابط الصفحة الحالية أو النص المحدد.

الأسئلة الشائعة

أسئلة شائعة حول إنشاء رموز QR باستخدام JavaScript.

الخياران الأكثر شيوعاً هما qrcode (خفيفة، رائعة لرموز QR البسيطة) و qr-code-styling (تخصيص متقدم بألوان وأشكال وشعارات). اختر qrcode للبساطة أو qr-code-styling لمرونة التصميم.

ابدأ بإنشاء رموز QR باستخدام JavaScript

استخدم مولدنا المجاني عبر الإنترنت لرموز QR السريعة، أو ادمج API في مشروع JavaScript الخاص بك للإنشاء التلقائي.

افتح مولد QRاستكشف وثائق API