جاواسکریپت

QR Code

توسط در یکشنبه, مهر ۱۴, ۱۳۹۸

کیوآر کد (QR Code) یک نوع بارکد دو بعدی است؛ که یکی از شرکت‌های زیرمجموعه اتومبیل سازی تویوتا در سال ۱۹۹۴، برای ردیابی سریع قطعات، آن را اختراع کرد.

دلائل محبوبیت کیوآر کد

  • هرگونه دیتا (اعداد، حروف و علائم) را رمزگذاری می‌کند.
  • ظرفیت آن بسیار زیاد است و می‌تواند بیش از ۷۰۰۰ کاراکتر را در یک بارکد قرار دهد.

کاربردهای کیوآر کد

  • ارائه آسانتر آدرس‌های اینترنتی برای دریافت اطلاعات یا ثبت نام در یک رویداد یا خرید یک محصول …
  • نصب نرم‌افزار موبایل
  • کارت ویزیت برای اینکه افراد بتوانند اطلاعات تماس را ذخیره کنند.
  • بلیط مسافرت‌ یا کارت ورود به یک رویداد
  • مطالب درسی برای یادگیری تعاملی
  • …

ساخت کیوآر کد

QRious یک کتابخانه جاوا اسکریپت ساده و مستقل است؛ که از المنت convas در HTML5 برای تولید کیوآر کد با ویژگی‌های دلخواه شما استفاده می‌کند.

در مثال زیر از کتابخانه QRious استفاده شده است. برای تست در کادر زیر کلمه مورد نظرتان را وارد کنید و کیوآر کد آن را ببینید. می‌توانید روی آن رایت کلیک کنید و آن را ذخیره کنید.

HTML

<canvas id="out-box"></canvas>
<input type="text" id="data">
<input type="number" id="size" placeholder="100" min="100" max="1000" value="300">
<input type="number" id="padding" placeholder="Auto" min="0">
<select id="level">
    <option value="L">L - 7% damage</option>
    <option value="M">M - 15% damage</option>
    <option value="Q">Q - 25% damage</option>
    <option value="H">H - 30% damage</option>
</select>
<input type="color" id="bg-color" value="#ffffff">
<input type="range" id="bg-alpha" placeholder="1" min="0" max="1" step="0.1" value="1">
<input type="color" id="fg-color" value="#000000">
<input type="range" id="fg-alpha" placeholder="1" min="0" max="1" step="0.1" value="1">
JS

let data = document.getElementById('data');
let size = document.getElementById('size');
let padding = document.getElementById('padding');
let level = document.getElementById('level');
let bgColor = document.getElementById('bg-color');
let bgAlpha = document.getElementById('bg-alpha');
let fgColor = document.getElementById('fg-color');
let fgAlpha = document.getElementById('fg-alpha');

let qr = new QRious({
  element: document.getElementById('out-box'),
  size: 300,
  value: 'www.nikparvar.ir'
});

data.value = 'www.nikparvar.ir';

data.addEventListener('input', function() {
  qr.value = data.value;
});

size.addEventListener('change', function() {
  if (size.validity.valid) {
    qr.size = size.value || null;
  }
});

padding.addEventListener('change', function() {
  if (padding.validity.valid) {
    qr.padding = padding.value || null;
  }
});

level.addEventListener('change', function() {
  qr.level = level.value;
});

bgColor.addEventListener('change', function() {
  qr.background = bgColor.value;
});

bgAlpha.addEventListener('change', function() {
  qr.backgroundAlpha = bgAlpha.value;
});

fgColor.addEventListener('change', function() {
  qr.foreground = fgColor.value;
});

fgAlpha.addEventListener('change', function() {
  qr.foregroundAlpha = fgAlpha.value;
});
0
نوشته‌های مرتبط