שילוב קוד QR בפרויקטי ווב: React, Node.js, SVG ולוגו

שילוב קוד QR בפרויקטי ווב: React, Node.js, SVG ולוגו

כשצריך ליצור קודי QR לחשבונות אישיים, כרטיסים אלקטרוניים או תשלומים מיידיים, המחשבה הראשונה היא לעתים קרובות לחבר API חיצוני. אבל זה מוסיף זמן אחזור, מגבלות בקשות ותלות בשירות צד שלישי. אנו מיישמים יצירה ישירות בדפדפן או בשרת—עם שליטה מלאה בסגנון, גודל, פורמט ויכולת להוסיף לוגו בתוך הקוד. הגישה שלנו מבטיחה מהירות (ללא בקשות נוספות), אבטחה ותאימות לכל מדיה—ממסך ועד דפוס.

ניסיון מעשרות פרויקטים מראה שיצירה בצד הלקוח באמצעות ספריית qrcode מפחיתה את TTFB ב-100–200 אלפיות השנייה בהשוואה לחלופות בצד השרת, ושימוש ב-SVG במקום PNG חוסך עד 80% במשקל הקובץ. אנו בוחרים את רמת תיקון השגיאות האופטימלית כדי לשמור על קריאות הקוד גם עם נזק של עד 30%—חשוב במיוחד לקודי QR עם לוגו. החיסכון בבקשות API בעת נטישת שירותים חיצוניים נע בין 200 ל-500 דולר לחודש. לדוגמה, ב-10,000 יצירות בחודש, נטישת API חיצוני חוסכת כ-200 דולר.

קוד QR הוא תקן ISO/IEC 18004.

איך לשלב מחולל QR ב-React?

הכלי המרכזי הוא ספריית qrcode (גרסה 1.5+). היא תומכת ב-Canvas, SVG ו-Data URL, עובדת בדפדפן וב-Node.js. ההתקנה מינימלית:

npm install qrcode npm install -D @types/qrcode 

רכיב מחולל

import QRCode from 'qrcode'
import { useEffect, useRef, useState } from 'react'

interface QRGeneratorProps {
  value: string
  size?: number
  errorCorrection?: 'L' | 'M' | 'Q' | 'H'
  color?: { dark: string; light: string }
}

export function QRGenerator({
  value,
  size = 256,
  errorCorrection = 'M',
  color = { dark: '#000000', light: '#ffffff' },
}: QRGeneratorProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [dataUrl, setDataUrl] = useState<string>('')

  useEffect(() => {
    if (!value || !canvasRef.current) return

    QRCode.toCanvas(canvasRef.current, value, {
      width: size,
      margin: 2,
      errorCorrectionLevel: errorCorrection,
      color,
    })

    // Параллельно готовим Data URL для скачивания
    QRCode.toDataURL(value, {
      width: size * 2, // 2x для чёткости при печати
      margin: 2,
      errorCorrectionLevel: errorCorrection,
      color,
    }).then(setDataUrl)
  }, [value, size, errorCorrection, color])

  function download() {
    const a = document.createElement('a')
    a.href = dataUrl
    a.download = 'qrcode.png'
    a.click()
  }

  return (
    <div className="flex flex-col items-center gap-3">
      <canvas ref={canvasRef} className="rounded" />
      {dataUrl && (
        <button onClick={download} className="text-sm text-blue-600 hover:underline">
          Скачать PNG
        </button>
      )}
    </div>
  )
}

רכיב זה יוצר קוד QR על Canvas ובו-זמנית יוצר Data URL להורדה ב-PNG ברזולוציה כפולה. הוא תומך בכל ארבע רמות תיקון השגיאות: L (7%), M (15%), Q (25%), H (30%). למשימות טיפוסיות, M מספיק; לקוד עם לוגו, השתמש ב-H.

למה יצירה בצד הלקוח מהירה יותר מאשר בצד השרת?

השוואה: עם יצירה בצד השרת, כל בקשה עוברת דרך הרשת, מעמיסה על מעבד השרת ודורשת מטמון. יצירה בצד הלקוח מתרחשת מיידית—ללא עיכוב בהעברת נתונים. לפי המדידות שלנו, במחשב ממוצע, יצירת קוד QR בגודל 256×256 אורכת פחות מ-10 אלפיות השנייה. זה קריטי במיוחד לדפים דינמיים שבהם הקוד נוצר בכל צפייה (לדוגמה, בחשבון אישי).

למקרים שבהם יש לשלוח את קוד ה-QR בדוא"ל או לשלב אותו ב-PDF, אנו משתמשים ביצירה בצד השרת באמצעות Node.js—ראו סעיף בהמשך.

גרסת SVG לשילוב בעמוד

import QRCode from 'qrcode'
import { useState, useEffect } from 'react'

function QRCodeSVG({ value, size = 200 }: { value: string; size?: number }) {
  const [svg, setSvg] = useState<string>('')

  useEffect(() => {
    QRCode.toString(value, { type: 'svg', width: size, margin: 1 })
      .then(setSvg)
  }, [value, size])

  return (
    <div dangerouslySetInnerHTML={{ __html: svg }} className="inline-block" />
  )
}

SVG מתקנה ללא אובדן איכות—מתאים ל-PDF ולחומרי דפוס. גודל הקובץ קטן פי 5–10 מ-PNG באותם ממדים.

QR עם לוגו במרכז

קוד QR עם רמת תיקון H עומד בעד 30% שטח חסום—ניתן להכניס לוגו:

async function generateQRWithLogo(text: string, logoUrl: string): Promise<string> {
  const canvas = document.createElement('canvas')
  const size = 400
  await QRCode.toCanvas(canvas, text, {
    width: size,
    margin: 2,
    errorCorrectionLevel: 'H', // Обязательно H при наличии логотипа
    color: {
      dark: '#000000',
      light: '#ffffff',
    },
  })
  const ctx = canvas.getContext('2d')!
  const logo = new Image()
  logo.crossOrigin = 'anonymous'
  await new Promise<void>((resolve) => {
    logo.onload = () => resolve()
    logo.src = logoUrl
  })
  const logoSize = size * 0.18 // 18% от размера QR
  const logoX = (size - logoSize) / 2
  const logoY = (size - logoSize) / 2
  // Белый фон под логотипом
  ctx.fillStyle = '#ffffff'
  ctx.beginPath()
  ctx.roundRect(logoX - 4, logoY - 4, logoSize + 8, logoSize + 8, 6)
  ctx.fill()
  ctx.drawImage(logo, logoX, logoY, logoSize, logoSize)
  return canvas.toDataURL('image/png')
}

הלוגו מונח על גבי קוד ה-QR שנוצר. חשוב: רמת תיקון שגיאות H היא חובה, אחרת הקוד יפסיק להיסרק. גודל הלוגו לא יעלה על 20% מרוחב ה-QR, או שתיקון השגיאות עלול לא לעזור.

יצירה בצד השרת (Node.js)

כשצריך לשלב QR ב-PDF או לשלוח אותו בדוא"ל—אנו יוצרים אותו בצד השרת:

import QRCode from 'qrcode'

// Express / Next.js API route
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const text = searchParams.get('text')
  if (!text) return new Response('Missing text', { status: 400 })
  const buffer = await QRCode.toBuffer(text, {
    type: 'png',
    width: 400,
    errorCorrectionLevel: 'M',
  })
  return new Response(buffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=3600',
    },
  })
}

נקודת הקצה בשרת מחזירה תמונת PNG עם מטמון לשעה—מספיק לרוב התרחישים (כרטיסים, קופונים).

שילוב שלב אחר שלב

1. התקן את ספריית npm install qrcode npm install -D @types/qrcode בפרויקט שלך.
2. צור רכיב React באמצעות Canvas (כפי שהוצג לעיל).
3. הגדר רמות תיקון שגיאות וצבעים באמצעות props.
4. הוסף כפתור להורדת PNG.
5. עבור SVG, החלף את Canvas בפונקציית import QRCode from 'qrcode' import { useEffect, useRef, useState } from 'react' interface QRGeneratorProps { value: string size?: number errorCorrection?: 'L' | 'M' | 'Q' | 'H' color?: { dark: string; light: string } } export function QRGenerator({ value, size = 256, errorCorrection = 'M', color = { dark: '#000000', light: '#ffffff' }, }: QRGeneratorProps) { const canvasRef = useRef<HTMLCanvasElement>(null) const [dataUrl, setDataUrl] = useState<string>('') useEffect(() => { if (!value || !canvasRef.current) return QRCode.toCanvas(canvasRef.current, value, { width: size, margin: 2, errorCorrectionLevel: errorCorrection, color, }) // Параллельно готовим Data URL для скачивания QRCode.toDataURL(value, { width: size * 2, // 2x для чёткости при печати margin: 2, errorCorrectionLevel: errorCorrection, color, }).then(setDataUrl) }, [value, size, errorCorrection, color]) function download() { const a = document.createElement('a') a.href = dataUrl a.download = 'qrcode.png' a.click() } return ( <div className="flex flex-col items-center gap-3"> <canvas ref={canvasRef} className="rounded" /> {dataUrl && ( <button onClick={download} className="text-sm text-blue-600 hover:underline"> Скачать PNG </button> )} </div> ) } .
6. עבור לוגו, השתמש ברמה H ושכבת תמונה.
7. עבור יצירה בצד השרת, צור נתיב API המחזיר buffer של PNG.

מה כלול בעבודה שלנו

אנו מציעים שילוב מלא של מחולל QR: בחירת ספרייה, פיתוח רכיב React מותאם, שילוב SVG ולוגו, יצירת API בשרת, בדיקות במכשירים אמיתיים ומסירת קוד מקור. החיסכון הממוצע בתקציב בפיתוח פונקציונליות כזו הוא 30% בהשוואה לרכישת פתרון API מוכן. העלות מחושבת באופן אישי לאחר בריף.

לוח זמנים: בין 0.5 ל-2 ימים תלוי במורכבות (לוגו, צבע, פורמטים מרובים). אנו מבטיחים שקודי ה-QR שנוצרו עוברים את כל בדיקות הסורקים (ZXing, iPhone, Google Lens) ועומדים בתקני ISO/IEC 18004.

למה לבחור בנו?

• 5 שנות ניסיון בשוק פיתוח יישומי ווב.
• מעל 50 פרויקטים שיושמו בהצלחה עם פונקציונליות QR.
• ניסיון עם Core Web Vitals: הפתרונות שלנו לא מגדילים LCP ו-CLS.
• תמיכה לאחר מסירה—אנו מתקנים תקלות תוך 24 שעות.

אם אתה צריך מחולל QR עובד במהירות וללא פשרות—צור קשר. ספר לנו על המשימה שלך, ואנו נציע את הפתרון האופטימלי. הזמן יישום היום.