پردازش تصویر

کمک‌کارهای تصویر بر پایهٔ 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

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

پارامترها

بازگشت

cutRound

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

پارامترها

بازگشت

opacity

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

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

پارامترها

بازگشت

getMatrix

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

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

پارامترها

بازگشت

نوع‌ها

type ImgSource = HTMLImageElement | HTMLCanvasElement;

مرتبط

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