آموزش گرفتن عکس سلفی با جاوا اسکریپت

گرفتن عکس سلفی با جاوا اسکریپت

در این آموزش به شما نشان خواهیم داد که چگونه با استفاده از جاوا اسکریپت اپپلیکیشن عکاسی طراحی کنید که  با استفاده از دوربین گوشی خود عکس بگیرید.   تعدادی از native api را معرفی خواهیم  کرد که با استفاده از آنها قادر به ساختن پروژه بدون هیچ وابستگی خارجی به کتابخانه های دیگر ، فلش و یا جاوا اسکریپت وانیلی نخواهید داشت.

اپپلیکیشن

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

مرور کلی برآنچه که انجام خواهیم داد:

  • به ورودی دوربین دسترسی پیدا کرده و با استفاده از API getUserMedia یک stream  ویدیویی بدست می آوریم.
  • stream ویدیویی را داخل عنصر video قرار می دهیم.
  • زمانی که کاربر عکس می گیرد، فریم ویدیویی فعلی را کپی کرده و  داخل عنصر canvas  قرار می دهیم.
  • canvas  را داخل dataURL عنصر image منتقل می کنیم. تا بتواند در صفحه نمایش داده شود و یا بعنوان یک فایل png دانلود شود.

دسترسی به دوربین

جاوااسکریپت یک  api بومی برای دسترسی به سخت افزار دوربین در قالب روش navigator.getUserMedia فراهم کرده است . ازآنجا که این api با داده های private  کار می کند، برای ارتباط از HTTPS امن استفاده می کند و برای هر عملیات از کاربر دسترسی های (permission) لازم را می خواهد.

اگر کاربر اجازه دهد که دوربین را فعال کنید، navigator.getUserMedia در یک callback موفق، یک استریم ویدئویی به ما خواهد داد. این استریم شامل داده ی خام منتشر شده از دوربین می باشد، و باید به منبع رسانه ای قابل استفاده با روش createObjectURL تبدیل شود.

گرفتن عکس

زمانی که استریم ویدئویی را دنبال می کنیم، می توانیم از ورودی دوربین snapshot هایی را گرفت. این کار با ترفند بسیار زیبایی انجام می شود که با استفاده از از عنصر <canvas>  یک فریم از استریم ویدئویی در حال اجرا را  گرفته و  در عنصر<img> ذخیره می کند.

 

نیازی به مشاهده عنصر canvas در DOM نیست. فقط  از API جاوااسکریپت به عنوان راهی برای ضبط یک لحظه از ویدئو استفاده می کنیم.

دانلود عکس

قطعا ما نمیخواهیم فقط یک عکس سلفی تهیه کنیم، بلکه میخواهیم تصاویر را برای نسل های بعدی ذخیره کرده تا ببینند. آسان ترین راه برای اینکار استفاده از عنصر <a> است.  در html دکمه دانلود به شکل زیر خواهد بود:

 

ویژگی download لینک را به دکمه دانلود تبدیل خواهد کرد. Value  این دکمه نشان دهنده نام پیش فرض فایل دانلود است، فایل واقعی برای دانلود در صفت href ذخیره می شود، که همانطور که می بینید در حال حاضر خالی است.

برای load عکس گرفته شده، در اینجا می توانیم از ImageURL تصویر از بخش قبلی استفاده کنیم:

 

 

حالا  وقتی کاربر روی دکمه کلیک می کند، باعث خواهدشد فایلی به نام glorious_selfie.png, که حاوی عکس گرفته شده است، دانلود شود.

امیدواریم که  این آموزش مفید بوده  و اکنون احساس  کنید الگوریتمی برای ساختن برخی از برنامه های عکس وجود دارد. موفق باشید.

نویسنده مطلب
سمیرا عظیمی

مهندسی نرم افزار خوندم و برنامه نویس هستم. عاشق رباتیک و نجوم و برنامه نویسی هستم.

دیدگاه کاربران

این وب سایت متعلق است به آذین وب (طراحی سایت در اصفهان) و تمامی حقوق آن محفوظ است.

طـبق ماده 12 فصل سوم قانون جرائم رایانه ای هرگونه کپی برداری از قالب پیگرد قانونی دارد.