شروع کار مقدماتی با HTML5 Canvas (جلسه 29) : ذخیره Canvas بصورت تصویر

- visibility ۰ mode_comment

html-canvas

همونطور که اطلاع دارید در 2 جلسه قبل در مورد دستکاری در پیکسلهای Canvas توضیحاتی رو خدمتتون قرار دادم و شما رو تا جایی که لازم بود با اون آشنا کردم. در این جلسه میخوایم نحوه ذخیره کردن وضعیت فعلی Canvas بصورت تصویر رو با هم بررسی کنیم.

المنت Canvas یک متد بنام toDataURL داره که میتونین از اون برای ذخیره کردن بصورت تصویر استفاده کنید. این متد یک data URI که بصورت کد base64 هست و اطلاعات همه پیکسلهای تصویر رو درون خودش قرار داده و رمزنگاری کرده، بر می گردونه و میتونین از اون استفاده کنید. resolution تصویری که در این حالت برگردانده می شود، 96dpi هست. فرمت تصویری که بصورت پیش فرض به ما میده، PNG  و خودتون میتونین متناسب با نیازتون اون رو تغییر بدین و مثلا تصویر JPG تولید کنید. پس نحوه استفاده از این متد بصورت زیر هست:

میبینید که این متد رو مستقیما برای خود المنت canvas مورد استفاده قرار دادیم و مانند گذشته نمیشه از این متد برای زمینه یا context استفاده کرد. همونطور که گفتیم تصویری که بصورت پیش فرض برگردانده میشه، png هست. پس کد بالا با کد پایین معادل هست:

میبینید که یک Mime type رو قرار میدیم و نوع تصویر خروجی رو مشخص میکنیم. اگر برای نوع تصویر jpg یا webp رو قرار بدین، میتونین یک عدد بین 0 تا 1 رو هم قرار بدین و کیفیت تصویر خروجی رو مشخص کنید. هر چه این مقدار به 1 نزدیک باشه، حجم تصویر و کیفیت آن بیشتر است. مقدار پیش فرض برای این مورد 0.92 هست. مثلا اگر بخوایم تصویر بصورت jpg و با کیفیت 70 درصد به ما تحویل داده بشه، بصورت زیر عمل میکنیم:

به همین راحتی. مثلا فرض کنید که یک canvas داریم و یک شکل درون اون قرار دادیم، بصورت زیر:

میبینید که بصورت ساده یک مربع قرمز رنگ رو درون Canvas رسم کردیم. خروجی در مرورگر بصورت زیر میشه:

حالا برای اینکه canvas رو بصورت یک تصویر دریافت کنیم، بصورت زیر عمل میکنیم:

به همین راحتی. حالا اگر console رو باز کنید، خواهید دید که تصویری از canvas بصورت Data URI قرار گرفته:

روی اون کلیک راست کرده و Open in new tab رو انتخاب کنید و یا بصورت ساده کل کد رو کپی کرده و درون قسمت آدرس وارد کنید. با اینکار تصویر در مرورگر نمایش داده میشه:

همونطور که میبینید هر چیزی که در Canvas رسم کردیم در تصویر قرار گرفته و اون جاهایی از canvas که چیزی رو قرار ندادیم، بصورت transparent یا شفاف در اومدن. اگر فرمت خروجی رو بصورت jpeg قرار بدیم دیگه اون جاها شفاف نمیشن و به جای اون رنگ سیاه نمایش داده میشه.

راه دیگری که برای ذخیره کردن تصویر از Canvas وجود داره، اینه که بر روی Canvas کلیک راست کرده و گزینه Save image as ... رو انتخاب کنیم. بصورت زیر:

با اینکار یک پنجره باز میشه و میتونین نام و آدرسی که قصد داریم تصویر مورد نظر ذخیره بشه رو مشخص کنیم و بر روی دکمه Save کلیک کنیم.

از کد Data URI که به دستمون اومد میتونیم به چند روش استفاده کنیم. یکی از روشها این هست که این کد رو برای ویژگی src المنت img مورد نظرمون قرار بدیم. بصورت زیر:

یا اینکه میتونیم یک لینک رو قرار بدیم و این کد رو درون ویژگی href اون لینک قرار بدیم. بصورت زیر:

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

میبینید که اسم این تصویر رو square.png قرار دادیم. این نام، نامی هست که برای تصویر مورد نظر مشخص میکنید و هر چیزی میتونه باشه. با اینکار زمانی که بر روی لینک کلیک میشه، بجای اینکه تصویر در صفحه جدید باز بشه، بصورت مستقیم دانلود میشه. در Chrome بصورت زیر هست:

به همین راحتی. میزان پشتیبانی مرورگرها از ویژگی download بصورت زیر هست:

میبینید که این ویژگی در Safari و Internet Explorer پشتیبانی نمیشه. در این موارد میتونین از این ابزار استفاده کنید. یک ابزار دیگه هم که برای تبدیل Canvas به تصویر بنام canvas2image وجود داره که میتونین از اون استفاده کنید.

در اینجا هم یک مثال کاربردی قرار داده شده که ابتدا در اون نقاشی مورد نظرتون رو می کشید و بعد از اون میتونین با زدن بر روی لینک download image، تصویر مربوط به اون رو دانلود کنید.

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

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران
ارسال نظرات

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