{"id":1787,"date":"2025-08-26T19:26:38","date_gmt":"2025-08-26T19:26:38","guid":{"rendered":"https:\/\/poxiro.com\/?page_id=1787"},"modified":"2025-10-12T15:13:27","modified_gmt":"2025-10-12T15:13:27","slug":"barcode-qr-generator","status":"publish","type":"page","link":"https:\/\/poxiro.com\/ar\/barcode-qr-generator\/","title":{"rendered":"\u0645\u0648\u0644\u062f \u0627\u0644\u0628\u0627\u0631\u0643\u0648\u062f \u0648 QR"},"content":{"rendered":"\n<div class=\"wp-block-uagb-image uagb-block-1d226738 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/poxiro.com\/wp-content\/uploads\/2025\/08\/download-9.png ,https:\/\/poxiro.com\/wp-content\/uploads\/2025\/08\/download-9.png 780w, https:\/\/poxiro.com\/wp-content\/uploads\/2025\/08\/download-9.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/poxiro.com\/wp-content\/uploads\/2025\/08\/download-9.png\" alt=\"\" class=\"uag-image-1788\" width=\"676\" height=\"300\" title=\"download (9)\" loading=\"lazy\" role=\"img\"\/><\/figure><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n<head>\n  <meta charset=\"utf-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\n  <title>\u0645\u0648\u0644\u062f \u0627\u0644\u0628\u0627\u0631\u0643\u0648\u062f &#8211; Poxiro<\/title>\n  <meta name=\"description\" content=\"Free online barcode &#038; QR code generator. Generate CODE128, EAN13, UPC, CODE39, ITF and QR codes. Download as SVG or PNG.\" \/>\n  <meta name=\"robots\" content=\"index,follow\" \/>\n  <link rel=\"canonical\" href=\"https:\/\/poxiro.com\/tools\/barcode-generator\" \/>\n  <!-- JSON-LD (Schema for SEO) -->\n  <script type=\"application\/ld+json\">\n  {\n    \"@context\": \"https:\/\/schema.org\",\n    \"@type\": \"Tool\",\n    \"name\": \"Barcode & QR Generator\",\n    \"url\": \"https:\/\/poxiro.com\/online-barcode-generator\",\n    \"description\": \"Generate barcodes (CODE128, EAN13, UPC, CODE39, ITF) and QR codes online. Download as SVG or PNG.\"\n  }\n  <\/script>\n\n  <!-- Libraries -->\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsbarcode@3.11.5\/dist\/JsBarcode.all.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/qrcodejs2@0.0.2\/qrcode.min.js\"><\/script>\n\n  <style>\n    :root{\n      --bg: #f6f7fb;\n      --card: #fff;\n      --text: #1f2937;\n      --muted: #6b7280;\n      --primary: #4361ee;\n      --accent: #3a0ca3;\n      --success: #16a34a;\n      --danger: #ef4444;\n      --shadow: 0 8px 24px rgba(15,23,42,0.06);\n      --radius: 12px;\n    }\n    [data-theme=\"dark\"]{\n      --bg: #0b1020;\n      --card: #0f1724;\n      --text: #e6eef8;\n      --muted: #9aa8c0;\n      --primary: #4cc9f0;\n      --accent: #7dd3fc;\n      --shadow: 0 8px 24px rgba(2,6,23,0.7);\n    }\n\n    *{box-sizing:border-box}\n    body{\n      margin:0;\n      min-height:100vh;\n      background:linear-gradient(180deg,var(--bg),transparent 120px);\n      color:var(--text);\n      font-family: \"Segoe UI\", Tahoma, Arial, sans-serif;\n      \n      transition: background .25s ease, color .25s ease;\n    }\n    .wrap{max-width:1100px;margin:0 auto;}\n    \n    .title{display:flex;gap:14px;align-items:center}\n    .logo{\n      width:100px;height:58px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;box-shadow:var(--shadow)\n    }\n    h1{font-size:20px;margin:0}\n    p.lead{margin:0;color:var(--muted)}\n\n    .controls{display:flex;gap:8px;align-items:center}\n    .mode-btn{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px 10px;border-radius:8px;cursor:pointer}\n    .mode-btn:hover{transform:translateY(-2px)}\n\n    \/* Card *\/\n    .card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:18px}\n    .grid{display:grid;grid-template-columns:380px 1fr;gap:18px}\n    @media (max-width:900px){.grid{grid-template-columns:1fr}}\n\n    \/* Left panel inputs *\/\n    .panel h3{margin:0 0 10px;font-size:16px}\n    label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}\n    input[type=\"text\"], select, textarea{\n      width:100%;padding:10px 12px;border-radius:10px;border:1px solid #e6e9ef;background:transparent;color:var(--text)\n    }\n    textarea{min-height:88px;resize:vertical}\n    .row{display:flex;gap:8px}\n    .row > *{flex:1}\n    .small{font-size:13px;padding:8px 10px;border-radius:10px}\n    .btn{\n      display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700\n    }\n    .btn.secondary{background:#f3f4f6;color:var(--text);border:1px solid #e6e9ef}\n    .btn.warn{background:var(--danger)}\n    .muted{color:var(--muted);font-size:13px}\n\n    \/* Preview area *\/\n    .preview-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}\n    .canvas-box{background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent);padding:16px;border-radius:10px;border:1px solid rgba(0,0,0,0.03)}\n    svg.barcode-svg{max-width:100%;height:auto;display:block}\n    .preview-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}\n    .chip{background:#fff;border:1px solid #e6e9ef;padding:6px 10px;border-radius:999px;font-weight:600;color:var(--muted)}\n    .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}\n\n    .hint{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}\n\n    footer.small{margin-top:18px;color:var(--muted);font-size:13px;text-align:center}\n\n    \/* error *\/\n    .error{color:var(--danger);font-weight:700;margin-top:8px;text-align:center}\n  <\/style>\n<\/head>\n<body>\n  <div class=\"wrap\">\n    <header>\n      <div class=\"title\">\n        <div class=\"logo\">PX<\/div>\n        <div>\n          <h1>Barcode &#038; QR Generator<\/h1>\n          <p class=\"lead\">Generate CODE128, EAN13, UPC, CODE39, ITF and QR codes \u2014 download SVG or PNG instantly.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"controls\">\n        <button class=\"mode-btn\" id=\"themeToggle\" title=\"Toggle theme\">Toggle Theme<\/button>\n      <\/div>\n    <\/header>\n\n    <main class=\"card\">\n      <div class=\"grid\">\n        <!-- LEFT: Inputs -->\n        <div class=\"panel\">\n          <h3>Enter data<\/h3>\n\n          <label for=\"type\">Barcode type<\/label>\n          <select id=\"type\" class=\"small\">\n            <option value=\"CODE128\">CODE128 (recommended)<\/option>\n            <option value=\"EAN13\">EAN13 (13 digits)<\/option>\n            <option value=\"UPC\">UPC (12 digits)<\/option>\n            <option value=\"CODE39\">CODE39<\/option>\n            <option value=\"ITF\">ITF<\/option>\n            <option value=\"QR\">QR Code<\/option>\n          <\/select>\n\n          <label for=\"value\">Value \/ Text<\/label>\n          <input id=\"value\" type=\"text\" placeholder=\"Enter numbers or text (ex: 1234567890123 or https:\/\/poxiro.com)\" \/>\n\n          <div style=\"display:flex;gap:8px;margin-top:10px\">\n            <div style=\"flex:1\">\n              <label>Width (px)<\/label>\n              <input id=\"width\" type=\"number\" class=\"small\" value=\"400\" min=\"80\" \/>\n            <\/div>\n            <div style=\"width:140px\">\n              <label>Height \/ Size<\/label>\n              <input id=\"height\" type=\"number\" class=\"small\" value=\"100\" min=\"20\" \/>\n            <\/div>\n          <\/div>\n\n          <div style=\"display:flex;gap:8px;margin-top:10px\">\n            <div style=\"flex:1\">\n              <label>Foreground color<\/label>\n              <input id=\"color\" type=\"color\" value=\"#000000\" \/>\n            <\/div>\n            <div style=\"flex:1\">\n              <label>Background color<\/label>\n              <input id=\"bgcolor\" type=\"color\" value=\"#ffffff\" \/>\n            <\/div>\n          <\/div>\n\n          <label style=\"margin-top:10px\">Options<\/label>\n          <div style=\"display:flex;gap:8px;flex-wrap:wrap\">\n            <label style=\"display:flex;align-items:center;gap:6px\"><input id=\"displayValue\" type=\"checkbox\" checked \/> Show text under barcode<\/label>\n            <label style=\"display:flex;align-items:center;gap:6px\"><input id=\"includeChecksum\" type=\"checkbox\" \/> Include checksum (if supported)<\/label>\n          <\/div>\n\n          <div style=\"margin-top:12px;display:flex;gap:8px;flex-wrap:wrap\">\n            <button class=\"btn\" id=\"generateBtn\">Generate<\/button>\n            <button class=\"btn secondary\" id=\"clearBtn\">Reset<\/button>\n            <button class=\"btn secondary\" id=\"copyBtn\">Copy value<\/button>\n          <\/div>\n\n          <div id=\"errorMsg\" class=\"error\" style=\"display:none\"><\/div>\n\n          <p class=\"hint\">Tip: For URL sharing, use QR Code. For product SKUs use CODE128 or EAN13\/UPC.<\/p>\n        <\/div>\n\n        <!-- RIGHT: Preview -->\n        <div class=\"panel preview-wrap\">\n          <h3>Preview<\/h3>\n          <div class=\"canvas-box\" id=\"previewBox\" style=\"min-width:220px;min-height:160px;display:flex;align-items:center;justify-content:center\">\n            <!-- generated barcode will be inserted here -->\n            <div id=\"barcodeArea\" style=\"text-align:center\"><\/div>\n          <\/div>\n\n          <div class=\"preview-meta\" style=\"margin-top:8px\">\n            <div class=\"chip\" id=\"chipType\">Type: \u2014<\/div>\n            <div class=\"chip\" id=\"chipSize\">Size: \u2014<\/div>\n            <div class=\"chip\" id=\"chipColor\">Color: \u2014<\/div>\n          <\/div>\n\n          <div class=\"actions\" style=\"margin-top:12px\">\n            <button class=\"btn\" id=\"downloadSvgBtn\">Download SVG<\/button>\n            <button class=\"btn\" id=\"downloadPngBtn\">Download PNG<\/button>\n            <button class=\"btn secondary\" id=\"zoomIn\">Zoom +<\/button>\n            <button class=\"btn secondary\" id=\"zoomOut\">Zoom &#8211;<\/button>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/main>\n\n    <!-- SEO \/ Description block (under tool) -->\n    <section class=\"card\" style=\"margin-top:18px\">\n      <h2 style=\"margin:0 0 8px\">About this tool<\/h2>\n      <p class=\"muted\">Generate barcodes and QR codes online. Use the tool to create product labels, share links via QR, or print barcodes for inventory. The app runs in your browser and nothing leaves your device.<\/p>\n\n      <div style=\"display:flex;gap:12px;margin-top:14px;flex-wrap:wrap\">\n        <div class=\"chip\">Formats: SVG, PNG<\/div>\n        <div class=\"chip\">Types: CODE128 \u2022 EAN13 \u2022 UPC \u2022 CODE39 \u2022 ITF \u2022 QR<\/div>\n        <div class=\"chip\">Free \u2022 No signup<\/div>\n      <\/div>\n\n      <div style=\"margin-top:14px\">\n        <h3 style=\"margin:10px 0\">How to use<\/h3>\n        <ol class=\"poxi-list\">\n          <li>Choose barcode type and enter your text \/ number.<\/li>\n          <li>Adjust width, height and colors.<\/li>\n          <li>Click <strong>Generate<\/strong> to preview.<\/li>\n          <li>Download as SVG or PNG.<\/li>\n        <\/ol>\n      <\/div>\n    <\/section>\n\n    <footer class=\"small\">\n      <p>\u00a9 Poxiro \u2014 Barcode &#038; QR Generator<\/p>\n    <\/footer>\n  <\/div>\n\n<script>\n\/* ---------- Helpers ---------- *\/\nconst el = id => document.getElementById(id);\nconst showError = msg => {\n  const e = el('errorMsg'); e.textContent = msg; e.style.display = msg ? 'block' : 'none';\n};\n\n\/* ---------- Theme toggle ---------- *\/\nconst themeToggle = el('themeToggle');\nconst setTheme = (t) => {\n  document.documentElement.setAttribute('data-theme', t);\n  localStorage.setItem('poxi_theme', t);\n};\nthemeToggle.addEventListener('click', ()=>{\n  const cur = document.documentElement.getAttribute('data-theme') || 'light';\n  setTheme(cur === 'light' ? 'dark' : 'light');\n});\nconst saved = localStorage.getItem('poxi_theme') || (window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');\nsetTheme(saved);\n\n\/* ---------- Elements ---------- *\/\nconst typeEl = el('type');\nconst valueEl = el('value');\nconst widthEl = el('width');\nconst heightEl = el('height');\nconst colorEl = el('color');\nconst bgcolorEl = el('bgcolor');\nconst displayValueEl = el('displayValue');\nconst includeChecksumEl = el('includeChecksum');\nconst generateBtn = el('generateBtn');\nconst clearBtn = el('clearBtn');\nconst copyBtn = el('copyBtn');\nconst barcodeArea = el('barcodeArea');\nconst chipType = el('chipType');\nconst chipSize = el('chipSize');\nconst chipColor = el('chipColor');\nconst downloadSvgBtn = el('downloadSvgBtn');\nconst downloadPngBtn = el('downloadPngBtn');\nconst zoomIn = el('zoomIn');\nconst zoomOut = el('zoomOut');\n\nlet lastSvgString = null; \/\/ Store last svg markup\nlet lastBlob = null;      \/\/ Store last blob (svg or png)\n\n\/* ---------- Validation ---------- *\/\nfunction validateInput(type, val) {\n  if(!val || val.trim()===\"\") return \"Please enter value\/text.\";\n  if(type === 'EAN13') {\n    const digits = val.replace(\/\\D\/g,'');\n    if(!(digits.length === 12 || digits.length === 13)) return \"EAN13 requires 12 or 13 digits (without\/with checksum).\";\n  }\n  if(type === 'UPC') {\n    const digits = val.replace(\/\\D\/g,'');\n    if(!(digits.length === 11 || digits.length === 12)) return \"UPC requires 11 or 12 digits (without\/with checksum).\";\n  }\n  return null;\n}\n\n\/* ---------- Generate logic ---------- *\/\nfunction clearPreview() {\n  barcodeArea.innerHTML = '';\n  lastSvgString = null; lastBlob = null;\n  el('compressionInfo') && (el('compressionInfo').textContent = '');\n}\n\nfunction renderBarcode(){\n  showError('');\n  const type = typeEl.value;\n  const value = valueEl.value.trim();\n  const width = Math.max(80, parseInt(widthEl.value || 400));\n  const height = Math.max(20, parseInt(heightEl.value || 100));\n  const color = colorEl.value;\n  const bgcolor = bgcolorEl.value;\n  const displayValue = displayValueEl.checked;\n  const includeChecksum = includeChecksumEl.checked;\n\n  const vErr = validateInput(type, value);\n  if(vErr){ showError(vErr); return; }\n\n  \/\/ Clear previous\n  barcodeArea.innerHTML = '';\n\n  if(type === 'QR'){\n    \/\/ QR generation via qrcode.js library\n    const qrDiv = document.createElement('div');\n    \/\/ size use width as both dims for QR\n    const size = Math.max(80, width);\n    \/\/ create QR\n    new QRCode(qrDiv, {\n      text: value,\n      width: size,\n      height: size,\n      colorDark: color,\n      colorLight: bgcolor,\n      correctLevel: QRCode.CorrectLevel.H\n    });\n    barcodeArea.appendChild(qrDiv);\n\n    \/\/ get svg fallback: qrcodejs builds canvas\/img; to get svg we can serialize img -> canvas -> svg fallback not needed\n    \/\/ We'll export PNG by drawing the image to canvas later.\n    lastSvgString = null;\n    lastBlob = null;\n    updateChips('QR', `${size}\u00d7${size}`, color);\n  } else {\n    \/\/ Use JsBarcode to create an SVG\n    const svgNS = \"http:\/\/www.w3.org\/2000\/svg\";\n    const svg = document.createElementNS(svgNS, \"svg\");\n    svg.setAttribute('class','barcode-svg');\n    svg.setAttribute('xmlns', svgNS);\n    svg.setAttribute('width', width);\n    svg.setAttribute('height', height + (displayValue ? 20 : 0));\n\n    \/\/ create a temporary rect as background\n    const rect = document.createElementNS(svgNS,'rect');\n    rect.setAttribute('x',0);\n    rect.setAttribute('y',0);\n    rect.setAttribute('width','100%');\n    rect.setAttribute('height','100%');\n    rect.setAttribute('fill', bgcolor);\n    svg.appendChild(rect);\n\n    const svgInner = document.createElementNS(svgNS,'svg');\n    svgInner.setAttribute('xmlns', svgNS);\n    svgInner.setAttribute('width', width);\n    svgInner.setAttribute('height', height + (displayValue ? 20 : 0));\n    svg.appendChild(svgInner);\n\n    try {\n      \/\/ JsBarcode uses the element to render\n      JsBarcode(svgInner, value, {\n        format: type,\n        width: 2,\n        height: height,\n        displayValue: displayValue,\n        fontSize: 14,\n        textMargin: 4,\n        margin: 8,\n        lineColor: color,\n        background: bgcolor,\n        flat: true,\n        valid: function(valid){\n          if(!valid) showError('The value is not valid for the selected barcode type.');\n        }\n      });\n    } catch(err){\n      showError('Error generating barcode: ' + (err.message || err));\n      return;\n    }\n\n    barcodeArea.appendChild(svg);\n    \/\/ store svg string\n    lastSvgString = new XMLSerializer().serializeToString(svg);\n    lastBlob = new Blob([lastSvgString], {type: 'image\/svg+xml;charset=utf-8'});\n    updateChips(type, `${width}\u00d7${height}`, color);\n  }\n}\n\n\/* ---------- update meta chips ---------- *\/\nfunction updateChips(type, size, color){\n  chipType.textContent = `Type: ${type}`;\n  chipSize.textContent = `Size: ${size}`;\n  chipColor.textContent = `Color: ${color}`;\n}\n\n\/* ---------- download helpers ---------- *\/\nfunction downloadSVG(){\n  if(!lastSvgString){\n    \/\/ If lastSvgString empty but QR generated as <img> or canvas, fallback to PNG\n    if(barcodeArea.querySelector('img')){\n      \/\/ convert image to blob then download as PNG\n      downloadPNG(); return;\n    }\n    showError('No SVG available to download. Generate a barcode first.');\n    return;\n  }\n  const filename = sanitizeFilename(valueEl.value || 'barcode') + '.svg';\n  const url = URL.createObjectURL(new Blob([lastSvgString], {type:'image\/svg+xml'}));\n  triggerDownload(url, filename);\n}\n\nfunction downloadPNG(){\n  \/\/ Convert either lastSvgString or inner image to PNG using canvas\n  const svgNode = barcodeArea.querySelector('svg');\n  const imgNode = barcodeArea.querySelector('img');\n\n  const canvas = document.createElement('canvas');\n  let w = parseInt(widthEl.value) || 400;\n  let h = parseInt(heightEl.value) || 100;\n  \/\/ if QR and image present, set square\n  const isQR = typeEl.value === 'QR';\n  if(isQR){\n    w = Math.max(200, w);\n    h = w;\n  }\n  canvas.width = w;\n  canvas.height = h + (displayValueEl.checked && !isQR ? 20 : 0);\n  const ctx = canvas.getContext('2d');\n  \/\/ fill background with selected bgcolor\n  ctx.fillStyle = bgcolorEl.value || '#fff';\n  ctx.fillRect(0,0,canvas.width,canvas.height);\n\n  if(svgNode){\n    const svgString = new XMLSerializer().serializeToString(svgNode);\n    const svgBlob = new Blob([svgString], {type: 'image\/svg+xml;charset=utf-8'});\n    const url = URL.createObjectURL(svgBlob);\n    const image = new Image();\n    \/\/ Important: to avoid tainting canvas, ensure crossorigin not required\n    image.onload = function(){\n      \/\/ Draw scaled to fit canvas\n      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);\n      URL.revokeObjectURL(url);\n      canvas.toBlob(function(blob){\n        const filename = sanitizeFilename(valueEl.value || 'barcode') + '.png';\n        const u = URL.createObjectURL(blob);\n        triggerDownload(u, filename);\n        URL.revokeObjectURL(u);\n      }, 'image\/png');\n    };\n    image.onerror = function(){\n      showError('Failed converting SVG to PNG. Try downloading SVG instead.');\n    };\n    image.src = url;\n  } else if(imgNode){\n    \/\/ It's an <img> (QR lib), draw img directly\n    const image = new Image();\n    image.onload = function(){\n      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);\n      canvas.toBlob(function(blob){\n        const filename = sanitizeFilename(valueEl.value || 'qr-code') + '.png';\n        const u = URL.createObjectURL(blob);\n        triggerDownload(u, filename);\n        URL.revokeObjectURL(u);\n      }, 'image\/png');\n    };\n    image.onerror = function(){ showError('Failed to render image for PNG download.'); };\n    image.src = imgNode.src;\n  } else {\n    showError('Nothing to download \u2014 generate a barcode first.');\n  }\n}\n\nfunction triggerDownload(url, filename){\n  const a = document.createElement('a');\n  a.href = url;\n  a.download = filename;\n  document.body.appendChild(a);\n  a.click();\n  a.remove();\n}\n\n\/* ---------- utilities ---------- *\/\nfunction sanitizeFilename(name){\n  return (name || 'barcode').toString().trim().replace(\/[<>:\"\/\\\\|?*\\x00-\\x1F]\/g,'-').substring(0,120);\n}\n\n\/* ---------- copy value ---------- *\/\ncopyBtn.addEventListener('click', ()=>{\n  const text = valueEl.value || '';\n  if(!text) return alert('No value to copy.');\n  navigator.clipboard.writeText(text).then(()=> {\n    copyBtn.textContent = 'Copied \u2713';\n    setTimeout(()=> copyBtn.textContent = 'Copy value', 1200);\n  }).catch(()=> alert('Copy failed.'));\n});\n\n\/* ---------- generate event ---------- *\/\ngenerateBtn.addEventListener('click', ()=>{\n  clearPreview();\n  renderBarcode();\n});\n\n\/* ---------- clear\/reset ---------- *\/\nclearBtn.addEventListener('click', ()=>{\n  fileReset();\n});\n\nfunction fileReset(){\n  valueEl.value = '';\n  widthEl.value = 400;\n  heightEl.value = 100;\n  colorEl.value = '#000000';\n  bgcolorEl.value = '#ffffff';\n  displayValueEl.checked = true;\n  includeChecksumEl.checked = false;\n  clearPreview();\n  el('errorMsg').style.display = 'none';\n  chipType.textContent = 'Type: \u2014';\n  chipSize.textContent = 'Size: \u2014';\n  chipColor.textContent = 'Color: \u2014';\n  el('uploadArea') && (el('uploadArea').textContent = 'Drag & drop your image here or click to select');\n}\n\n\/* ---------- download buttons ---------- *\/\ndownloadSvgBtn.addEventListener('click', downloadSVG);\ndownloadPngBtn.addEventListener('click', downloadPNG);\n\n\/* ---------- zoom ---------- *\/\nlet zoom = 1;\nzoomIn.addEventListener('click', ()=>{\n  zoom = Math.min(3, zoom + 0.2);\n  barcodeArea.style.transform = `scale(${zoom})`;\n});\nzoomOut.addEventListener('click', ()=>{\n  zoom = Math.max(0.4, zoom - 0.2);\n  barcodeArea.style.transform = `scale(${zoom})`;\n});\n\n\/* ---------- initial setup ---------- *\/\n(function init(){\n  \/\/ Example placeholder\n  valueEl.value = 'https:\/\/poxiro.com';\n  \/\/ auto generate initial preview\n  renderBarcode();\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0648\u0644\u062f \u0627\u0644\u0628\u0627\u0631\u0643\u0648\u062f &#8211; Poxiro PX Barcode &#038; QR Generator Generate CODE128, EAN13, UPC, CODE39, ITF and QR codes \u2014 download SVG or PNG instantly. Toggle Theme Enter data Barcode type CODE128 (recommended)EAN13 (13 digits)UPC (12 digits)CODE39ITFQR Code Value \/ Text Width (px) Height \/ Size Foreground color Background color Options Show text under barcode Include [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1787","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"ar3508802@gmail.com","author_link":"https:\/\/poxiro.com\/ar\/author\/ar3508802gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"\u0645\u0648\u0644\u062f \u0627\u0644\u0628\u0627\u0631\u0643\u0648\u062f &#8211; Poxiro PX Barcode &#038; QR Generator Generate CODE128, EAN13, UPC, CODE39, ITF and QR codes \u2014 download SVG or PNG instantly. Toggle Theme Enter data Barcode type CODE128 (recommended)EAN13 (13 digits)UPC (12 digits)CODE39ITFQR Code Value \/ Text Width (px) Height \/ Size Foreground color Background color Options Show text under barcode Include&hellip;","_links":{"self":[{"href":"https:\/\/poxiro.com\/ar\/wp-json\/wp\/v2\/pages\/1787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/poxiro.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/poxiro.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/poxiro.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/poxiro.com\/ar\/wp-json\/wp\/v2\/comments?post=1787"}],"version-history":[{"count":18,"href":"https:\/\/poxiro.com\/ar\/wp-json\/wp\/v2\/pages\/1787\/revisions"}],"predecessor-version":[{"id":1927,"href":"https:\/\/poxiro.com\/ar\/wp-json\/wp\/v2\/pages\/1787\/revisions\/1927"}],"wp:attachment":[{"href":"https:\/\/poxiro.com\/ar\/wp-json\/wp\/v2\/media?parent=1787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}