illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

ترفندهای پیشرفته jQuery (قسمت 52)

0 221 ۱۴ آذر ۹۴

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم.
jquery trickshot

موضوع پنجم : استفاده از پلاگینها

ترفند 90 : فیلترهای شبیه به Instagram با Javascript

یکی دیگه از پلاگینهایی که قدرت HTML5 و Javascript رو نمایش میده ، Caman.js هست. این ابزار مجموعه ای قدرتمند از افکتهای دستکاری در Canvas رو در خودش جا داده و شما میتونین براحتی با استفاده از قدرت اون فیلترهایی شبیه به Instagram رو بوجود بیارید و بر روی عکسهاتون اعمال کنید.

اولین مرحله اینه که ابزار مورد نظر رو include کنید. این ابزار بی نیاز از ابزارهای دیگه هست و شما میتونین بدون نیاز به jQuery از اون استفاده کنید.

در اینجا هم لیستی از افکتهای از پیش تعریف شده در Caman.js رو قرار میدیم:

حالا میایم یک متد change برای dropdown در نظر میگیریم که زمانی که اونو تغییر دادیم ، افکت مورد نظر بر روی عکس اعمال بشه:

میبینید که در ابتدا dropdown رو در یک متغیر قرار دادیم. بعد از اون یک متد change برای اون تعریف کردیم. درون این متد و هر بار که اجرا بشه یک canvas ایجاد میشه و بعد از dropdown قرار میگیره. متغیر filter مقدار کنونی dropdown هست. بعد از اون از تابع Caman استفاده میکنیم که تعدادی ورودی رو میگیره. پارامتر اول همون canvas هست که تصویر درونش قرار میگیره. پارامتر دوم رو آدرس تصویری میزاریم که قصد داریم افکتها بر روی اونا اعمال بشه. بعد از اون هم یک تابع قرار میگیره که کدهایی رو اجرا میکنه. در ابتدا canvas ساخته شده در عملیات قبلی رو حذف میکنیم و یک جدید رو قرار میدیم. حالا با استفاده از عملگر in بررسی میشه که مقدار filter در caman وجود داره یا خیر. اگر وجود داشت اون افکت با استفاده از متد render اجرا میشه و بر روی عکس اعمال میشه و میتونید خروجی رو ببینید.

در آخر هم رویداد change رو با استفاده از متد trigger به المنت dropdown نسبت دادیم که زمانی که برای اولین بار صفحه لود میشه این عملیات انجام بشه.

این افکتهایی که در بالا مشاهده کردید ، افکتهایی هستند که بصورت پیش ساخته در CamanJS وجود داره. این افکتها با استفاده از تغییر ویژگی های متعدد بوجود اومده و شما نیز میتونین افکتهای مدنظر خودتون رو بسازید. ویژگی هایی که میتونین تغییر بدین بترتیب زیر هستند:

  • brightness
  • saturation
  • exposure
  • sepia
  • noise
  • sharpen
  • contrast
  • vibrance
  • hue
  • gamma
  • clip
  • stackBlur

حالا میتونین با استفاده از JS هر کدوم از ویژگی ها رو بر روی عکسهای مورد نظرتون قرار بدین و عددی بین 0 تا 100 رو برای اونا مشخص کنید:

حالا میتونین با استفاده از JS اونو اعمال کنید:

اگر خروجی رو ببینید موارد مورد نظر بر روی عکس اعمال شده.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram