پردازش تصویر

کمک‌کارهای تصویر بر پایهٔ Canvas. هر دگرگونی به‌جای data URL یک بوم برون‌پرده‌ای برمی‌گرداند، پس می‌توان چندتایشان را به هم زنجیر کرد بی‌آنکه در هر گام یک PNG کدگذاری و رمزگشایی شود.

کاربرد

import { getImage, cutRound, opacity } from 'ranuts/utils';

const img = await getImage('/avatar.png');
const rounded = cutRound(img, 24);
const faded = opacity(rounded, 0.5);
document.body.appendChild(faded as HTMLCanvasElement);

API

getImage

تصویری را از روی مسیرش بار می‌کند؛ همین که رمزگشایی شد برآورده می‌شود.

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
src	مسیر تصویر	string	الزامی

بازگشت

آرگومان	توضیح	نوع
promise	عنصر تصویرِ بارگذاری‌شده	Promise<ImgSource>

TIP

هنگام رد شدن، آنچه می‌گذرد رویدادِ خامِ error است، نه شیء Error. onerror در <img> هیچ دلیلی با خود نمی‌آورد — مرورگرها آن را برای شکست‌های میان‌مبدأ عمداً پنهان می‌کنند — پس پیچیدنش در Error تنها پیامی ساختگی می‌سازد.

cutRound

تصویر را با گوشه‌های گرد می‌برد.

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
img	تصویر مبدأ	ImgSource	الزامی
radius	شعاع گوشه	number	الزامی

بازگشت

آرگومان	توضیح	نوع
canvas	بوم برون‌پرده‌ای	ImgSource

opacity

کدری یکنواختی را بر سراسر تصویر می‌گذارد.

نخست ctx.filter را ترجیح می‌دهد (که روی GPU می‌دود)؛ آنجا که پشتیبانی نشود، به بازنویسی کانال آلفا پیکسل‌به‌پیکسل پناه می‌برد. آن راه جایگزین، پیکسل‌هایی را که آلفایشان از پیش 0 است رد می‌کند، پس نواحی کاملاً شفاف نمی‌توانند مقداری ناصفر بگیرند.

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
img	تصویر مبدأ	ImgSource	الزامی
opacity	کدری، از ۰ تا ۱	number	الزامی

بازگشت

آرگومان	توضیح	نوع
canvas	بوم برون‌پرده‌ای	ImgSource

getMatrix

ماتریس وزن گاوسی دوبعدی می‌سازد که چنان بهنجار شده که مجموع وزن‌ها 1 شود.

بهنجارسازی ناگزیر است: بی آن، پیچش با این ماتریس روشنایی کلی تصویر را عوض می‌کند. مقدار پیش‌فرض sigma برابر radius / 3 است؛ با این مقدار، منحنی گاوسی تا رسیدن به شعاع تقریباً به صفر افت کرده، پس خطای بریدن ناچیز است.

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
radius	شعاع محو	number	الزامی
sigma	انحراف معیار	number	radius / 3

بازگشت

آرگومان	توضیح	نوع
matrix	آرایهٔ تختِ (2r+1)² عنصری، سطر‌محور، با مجموع 1	number[]

نوع‌ها

type ImgSource = HTMLImageElement | HTMLCanvasElement;

مرتبط

• convertImageToBase64: از File به data URLِ base64
• isImageSize: وارسی ابعاد یک تصویر