شروع کار مقدماتی با HTML5 Canvas (جلسه 15) : کار با تصاویر در Canvas - قسمت 2



visibility  
mode_comment   ۰

html-canvas

در جلسه گذشته در مورد یکی از روشهای قرار دادن تصاویر درون سایت صحبت کردیم و در این جلسه میخوایم روشهای دیگه رو بهتون توضیح بدیم. اول از همه یچیز که مربوط به جلسه قبل و این جلسه هست رو توضیح میدم.

اگه تصویری که از میخواید درون Canvas قرار بدین، درون هاست و دامین خودتون هست و لود میشه، هیچ مشکلی نخواهید داشت. اما اگر بخواید از تصاویری که در Domain های دیگه هست درون Canvas استفاده کنید، دو حالت به وجود میاد:

  • اگر اون سایت مورد نظر از سرور خودش، اجازه Cross-Origin-Access رو به تصاویر داده باشه، شما میتونین از اون تصویر استفاده کنید با این شرط که ویژگی crossorigin رو برای اون قرار بدین. مثلا این آدرس تصویر رو درون مرورگر باز کنید، اگه درون تب Network مربوط به Inspector مرورگرتون ببینید، هدر access-control-allow-origin برابر با * قرار گرفته:

html5 canvas 45

این به این معنی هست که همه دامنه های دیگر میتونن از این تصویر درون سایت خودشون استفاده کنید. حالا ما تنها کاری که باید بکنیم اینه ویژگی crossorigin رو به تگ img خودمون اضافه کنیم و مقدار اون رو برابر با anonymous قرار بدین. برای مطالعه بیشتر در این زمینه، میتونین این لینک و این لینک رو مطالعه کنید. پس تگ img بصورت زیر خواهد بود:

حالا میتونیم با خیال راحت از اون درون Canvas استفاده کنیم و Canvas ما هم دچار مشکل نخواهد شد.

  • اگر سایتی که میخوایم از اون استفاده کنیم Cors رو برای تصویر مورد نظرمون قرار نداده باشه، اگر از اون تصویر درون Canvas استفاده کنیم مشکلاتی برای Canvas به وجود میاد که اصطلاحا به اون Taint گفته میشه و نمیتونین خیلی کارا رو انجام بدین. برای مطالعه بیشتر در این زمینه میتونین این لینک رو مشاهده بفرمایید.

حالا سراغ روشهای دیگه استفاده از تصویر درون Canvas میریم.

ساخت img درون Javascript:

برای اینکار ما یک شئ جدید از نمونه و Function Constructor مربوط به Image میسازیم و ویژگی src اون رو برابر با آدرس تصویر مورد نظرمون قرار میدیم. در آخر برای اینکه مطمئن بشیم تصویر بصورت کامل لود میشه و بعد درون canvas قرار میگیره، از رویداد load برای اون استفاده میکنیم. بصورت زیر:

به همین سادگی. خروجی همانند قبل بصورت زیر خواهد بود:html5 canvas 45

همانند حالت قبل، اگر تصویر در دامنه دیگه ای قرار داشت و Cors برای اون فعال بود، بصورت زیر عمل کنید:

همونطور که دیدید ویژگی crossOrigin رو برای اون همانند قبل برابر با anonymous قرار دادیم.

قرار دادن تصویر بصورت از Data URI:

روش دیگه ای که وجود داره اینه که تصاویرتون رو بصورت Data URI در بیارید و از اونا استفاده کنید. Data URI به شما اجازه میده که یک تصویر رو کاملا بصورت رشته ای با رمزنگاری Base64 قرار بدین و از اونا مستقیما در کدهاتون استفاده کنید. این سایت یکی از ابزارهای آنلاینی هست که میتونین از اون برای تبدیل تصاویرتون به Data URI استفاده کنید. خب ما تصویر لوگوی Angular بالا رو با استفاده از این ابزار تبدیل میکنیم و از اون استفاده میکنیم. کد بصورت زیر خواهد شد:

میبینید که کد تبدیل شده رو درون ویژگی src قرار دادیم. به همین راحتی.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

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

موفق باشید

یا علی

Source

متخصص PHP
دوست داری از طریق برنامه نویسی کسب درآمد کنی؟ اگر می خوای با برنامه نویسی وب و موبایل کسب درآمد کنی، جایی استخدام شی و یا حتی اینکه درامد ارزی داشته باشی، حتما دوره های متخصص سون لرن رو یه نگاه بنداز : متخصص شو arrow_back
comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.