رمزگشایی تصاویر برای استفاده با بوم بسیار متداول است، چه به کاربران اجازه دهد یک آواتار را سفارشی کنند، یک تصویر را برش دهند یا فقط روی یک عکس بزرگنمایی کنند. مشکل رمزگشایی تصاویر این است که می تواند CPU فشرده باشد و گاهی اوقات می تواند به معنای jank یا checkerboarding باشد. از Chrome 50 (و در فایرفاکس 42+) اکنون گزینه دیگری دارید: createImageBitmap() . این به شما امکان می دهد یک تصویر را در پس زمینه رمزگشایی کنید، و به یک ImageBitmap اولیه جدید دسترسی پیدا کنید، که می توانید آن را به همان روشی که یک عنصر <img> ، بوم دیگر، یا یک ویدیو را در یک بوم ترسیم می کنید، بکشید.
رسم حباب ها با createImageBitmap()
فرض کنید یک تصویر حباب را با fetch() (یا XHR) دانلود کرده اید، و می خواهید آن را در یک بوم بکشید. بدون createImageBitmap() باید یک عنصر تصویر و یک URL Blob ایجاد کنید تا تصویر را به فرمتی تبدیل کنید که می توانید استفاده کنید. با استفاده از آن شما مسیر بسیار مستقیم تری برای نقاشی پیدا می کنید:
fetch(url)
.then(response => response.blob())
.then(blob => createImageBitmap(blob))
.then(imageBitmap => ctx.drawImage(imageBitmap, 0, 0));
این رویکرد همچنین با تصاویر ذخیره شده به عنوان حباب در IndexedDB کار می کند و حباب ها را به یک فرمت متوسط مناسب تبدیل می کند. همانطور که اتفاق می افتد کروم 50 همچنین از روش .toBlob() روی عناصر بوم پشتیبانی می کند ، به این معنی که شما می توانید - برای مثال - حباب ها را از عناصر بوم تولید کنید.
استفاده از createImageBitmap() در وب کارگران
یکی از زیباترین ویژگی های createImageBitmap() این است که در کارگران نیز موجود است، به این معنی که اکنون می توانید تصاویر را در هر کجا که بخواهید رمزگشایی کنید. اگر تصاویر زیادی برای رمزگشایی دارید که آنها را غیر ضروری می‌دانید، URL آنها را به یک Web Worker ارسال می‌کنید، که در صورت اجازه آنها را دانلود و رمزگشایی می‌کند. سپس آنها را به نخ اصلی برای کشیدن روی بوم منتقل می کند.
کد انجام این کار ممکن است چیزی شبیه به این باشد:
// In the worker.
fetch(imageURL)
.then(response => response.blob())
.then(blob => createImageBitmap(blob))
.then(imageBitmap => {
// Transfer the imageBitmap back to main thread.
self.postMessage({ imageBitmap }, [imageBitmap]);
}, err => {
self.postMessage({ err });
});
// In the main thread.
worker.onmessage = (evt) => {
if (evt.data.err)
throw new Error(evt.data.err);
canvasContext.drawImage(evt.data.imageBitmap, 0, 0);
}
امروز اگر در رشته اصلی createImageBitmap() فراخوانی کنید، دقیقاً همان جایی است که رمزگشایی انجام خواهد شد. با این حال، برنامه‌ها این است که کروم رمزگشایی را به‌طور خودکار در رشته‌ای دیگر انجام دهد و به کاهش حجم کار رشته اصلی کمک کند. با این حال، در این بین، باید به انجام رمزگشایی روی رشته اصلی توجه داشته باشید، زیرا این کار فشرده ای است که می تواند سایر وظایف ضروری مانند جاوا اسکریپت، محاسبات سبک، چیدمان، نقاشی یا ترکیب بندی را مسدود کند.
یک کتابخانه کمکی
برای اینکه زندگی را کمی ساده‌تر کنم، یک کتابخانه کمکی ایجاد کرده‌ام که رمزگشایی یک کارگر را انجام می‌دهد، و تصویر رمزگشایی شده را به رشته اصلی ارسال می‌کند و آن را به بوم می‌کشد. مطمئناً باید با خیال راحت آن را مهندسی معکوس کنید و مدل را در برنامه های خود اعمال کنید. مزیت اصلی، کنترل بیشتر است، اما (مثل معمول) کدهای بیشتری، اشکال زدایی بیشتر و موارد لبه بیشتری نسبت به استفاده از عنصر <img> در نظر گرفته می شود.
اگر به کنترل بیشتری در رمزگشایی تصویر نیاز دارید، createImageBitmap() بهترین دوست جدید شماست. آن را در Chrome 50 بررسی کنید و به ما اطلاع دهید که چگونه کار می کنید!