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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۵ فروردین ۱۳۹۶

html-canvas

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

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

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

html5 canvas 45

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

<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" crossorigin="anonymous" style="display: none;">

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

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

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

ساخت img درون Javascript:

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

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.src = 'ng.png';

img.addEventListener('load', function() {
	ctx.drawImage(img, 10, 10);
}, false);

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

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

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'ng.png';

img.addEventListener('load', function() {
	ctx.drawImage(img, 10, 10);
}, false);

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

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

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

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.src = 'data:image/png;base64,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';

img.addEventListener('load', function() {
	ctx.drawImage(img, 10, 10);
}, false);

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

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

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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