خواندن qrcode از روی تصویر در جاوااسکریپت

خواندن qrcode از روی تصویر در جاوااسکریپت

پردازش تصویر qrcode ( رمز گشایی ) در جاوااسکریپت ، qrcode ها کاربرد فراوانی در زندگی امروزی دارند به طوری می توانند اطلاعات مختلفی مثل آدرس صفحات وب ، متن ، اطلاعات مخاطب ، ایمیل آماده ارسال ، پیامک آماده ارسال ، رمز شبکه وایرلس و کلی دیگر از اطلاعات رو در خود ذخیره کند . qrcode ها معمولا با پیکسل های مشکی و سفید خود را نمایش می دهند و با یک اسکن کوتاه می توان به اطلاعات ذخیره شده ی آن دسترسی یافت .

یک تصویر qrcode بسازید !

ابتدا برای اینکه بتوانیم qrcode را بخوانیم باید یکی از آن را بسازیم . از این جهت می توانید وارد این وبسایت شده و یکی از 5 گزینه را انتخاب کنید مثل URL .

پس از اینکه اطلاعات خود را وارد کردید روی گزینه SAVE کلیک کرده و یک خروجی png یا jpg بگیرید .

استفاده از کتابخانه utf8 به صورت اختیاری

در صورتی که اطلاعاتی که برای ساخت وارد کرده باشید فارسی باشد باید برای خواندن اطلاعات از این کتابخانه یعنی utf8 استفاده کنید تا بجای مواجه شدن با حروف نا شناخته حروف فارسی را دریافت کنید .

افزودن کتابخانه برای خواندن qrcode

کد های زیر را در head صفحه تان اضافه کنید .

<script src="lib/qcode-decoder.min.js"></script>
<script src="lib/utf8.js"></script>


حال یک تابع تعریف می کنیم تا راحت تر از این کتابخانه استفاده کنیم .

function decodeQrCode(img) { 

	QCodeDecoder().decodeFromImage(img, function (er, res) { 
	
	console.log(utf8.decode(res)); 
	
	});
}


خواندن یک آدرس URL

برای بارگذاری تصویر می توانید هم به صورت عادی یک تگ img اضافه کرده و با جاوا اسکریپت به آن دسترسی پیدا کرده و به عنوان آرگومان به تابع decodeQrCode بدهید و یا

می توانید مثل کد پایین بدون نیاز به ساخت img و فقط با کلاس آن و تعیین منبع تصویر آن را بارگذاری کنید .

decodeQrCode((new Image()).src = "qr/url.png"); // https://rapidcode.ir/


خواندن دیگر نوع های داده

  1. اطلاعات مخاطب
  2. شماره تماس
  3. پیامک آماده ارسال
  4. متن
decodeQrCode((new Image()).src = "qr/contact.png"); // BEGIN:VCARD VERSION:3.0 N:rapidcode;rapid ...... 

decodeQrCode((new Image()).src = "qr/phone.png"); // tel:09396666633


decodeQrCode((new Image()).src = "qr/sms.png"); // SMSTO:09996669966:my message goes here 

 
decodeQrCode((new Image()).src = "qr/text.png"); // رپید کد کتابخانه مجازی برنامه نویسان - RapidCode Virtual Programmers Library


لینک پروژه خواندن qrcode در جاوا اسکریپت

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

لیست نظرات

  1. حمیدرضا
    حمیدرضا

    سلام عملیات decode انجام نمیشه.. علت چیه؟

    27 آبان 1401 | 09:45:29
  • حسین باقری
    حسین باقری

    سلام ، احتمالا برنامه رو در حالت عادی باز می کنید باید روی لوکال هاست باز بشه تا بدرستی خروجی بده ، یک لوکال هاست ساده که با vscode سازگار باشه این پلاگین هست .

    27 آبان 1401 | 12:57:15
  • علی
    علی

    دستتون درد نکنه ولی این فقط برای کیو آر کد هست. برای بارکدهای خطی چیزی هست؟

    30 اردیبهشت 1399 | 17:38:39
    • حسین باقری
      حسین باقری

      درود می تونید از کتابخانه ی quaggaJS استفاده کنید .

      30 اردیبهشت 1399 | 19:20:51
    contact us