একটি ক্যানভাসের সাথে ব্যবহারের জন্য চিত্রগুলি ডিকোড করা বেশ সাধারণ, এটি ব্যবহারকারীদের একটি অবতার কাস্টমাইজ করতে, একটি চিত্র ক্রপ করতে, বা কেবল একটি ছবিতে জুম করার অনুমতি দেয়৷ ডিকোডিং ইমেজগুলির সমস্যা হল যে এটি CPU নিবিড় হতে পারে এবং এর অর্থ কখনও কখনও জ্যাঙ্ক বা চেকারবোর্ডিং হতে পারে। ক্রোম 50 (এবং ফায়ারফক্স 42+ এ) হিসাবে আপনার কাছে এখন আরেকটি বিকল্প রয়েছে: createImageBitmap() । এটি আপনাকে ব্যাকগ্রাউন্ডে একটি ইমেজ ডিকোড করতে এবং একটি নতুন ImageBitmap আদিম অ্যাক্সেস পেতে দেয়, যা আপনি একটি ক্যানভাসে আঁকতে পারেন যেভাবে আপনি একটি <img> উপাদান, অন্য একটি ক্যানভাস বা একটি ভিডিও করেন৷
CreateImageBitmap() দিয়ে ব্লব আঁকা
ধরা যাক আপনি fetch() (বা XHR) দিয়ে একটি ব্লব ইমেজ ডাউনলোড করেছেন এবং আপনি এটি একটি ক্যানভাসে আঁকতে চান। createImageBitmap() ব্যতীত আপনাকে একটি চিত্র উপাদান এবং একটি ব্লব URL তৈরি করতে হবে যাতে আপনি ব্যবহার করতে পারেন এমন একটি বিন্যাসে চিত্রটি পেতে পারেন। এটির সাহায্যে আপনি পেইন্টিংয়ের আরও অনেক বেশি সরাসরি রুট পাবেন:
fetch(url)
.then(response => response.blob())
.then(blob => createImageBitmap(blob))
.then(imageBitmap => ctx.drawImage(imageBitmap, 0, 0));
এই পদ্ধতিটি ইনডেক্সডডিবিতে ব্লব হিসাবে সংরক্ষিত চিত্রগুলির সাথেও কাজ করবে, ব্লবগুলিকে একটি সুবিধাজনক মধ্যবর্তী বিন্যাসের কিছু তৈরি করবে। যেমনটি ঘটে Chrome 50 ক্যানভাস উপাদানগুলিতে .toBlob() পদ্ধতিকে সমর্থন করে , যার অর্থ আপনি -- উদাহরণস্বরূপ -- ক্যানভাস উপাদানগুলি থেকে ব্লব তৈরি করতে পারেন৷
ওয়েব কর্মীদের createImageBitmap() ব্যবহার করে
createImageBitmap() এর সবচেয়ে সুন্দর বৈশিষ্ট্যগুলির মধ্যে একটি হল এটি কর্মীদের মধ্যেও উপলব্ধ, মানে আপনি এখন যেখানেই চান ছবিগুলিকে ডিকোড করতে পারেন৷ যদি আপনার কাছে ডিকোড করার জন্য অনেকগুলি ছবি থাকে যেগুলিকে আপনি অপ্রয়োজনীয় বলে মনে করেন তবে আপনি তাদের URLগুলিকে একজন ওয়েব ওয়ার্কারের কাছে পাঠাবেন, যা সময়মতো সেগুলি ডাউনলোড এবং ডিকোড করবে৷ এটি তখন একটি ক্যানভাসে আঁকার জন্য তাদের মূল থ্রেডে স্থানান্তর করবে।
এটি করার জন্য কোডটি এমন কিছু দেখতে পারে:
// 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() কল করেন, ঠিক সেখানেই ডিকোডিং করা হবে। তবে পরিকল্পনাগুলি হল, Chrome স্বয়ংক্রিয়ভাবে অন্য থ্রেডে ডিকোডিং করে যা মূল থ্রেডের কাজের চাপ কমিয়ে রাখতে সাহায্য করে৷ এই সময়ের মধ্যে, যাইহোক, আপনার মূল থ্রেডে ডিকোডিং করার বিষয়ে সচেতন হওয়া উচিত, কারণ এটি নিবিড় কাজ যা জাভাস্ক্রিপ্ট, শৈলী গণনা, লেআউট, পেইন্টিং বা কম্পোজিটিং এর মতো অন্যান্য প্রয়োজনীয় কাজগুলিকে ব্লক করতে পারে।
একটি সহায়ক গ্রন্থাগার
জীবনকে একটু সহজ করার জন্য, আমি একটি হেল্পার লাইব্রেরি তৈরি করেছি যা একজন কর্মীর ডিকোডিং পরিচালনা করে, এবং ডিকোড করা চিত্রটিকে মূল থ্রেডে ফেরত পাঠায় এবং এটি একটি ক্যানভাসে আঁকে। আপনার অবশ্যই, এটিকে বিপরীত প্রকৌশলী করতে নির্দ্বিধায় এবং আপনার নিজের অ্যাপগুলিতে মডেলটি প্রয়োগ করা উচিত। প্রধান সুবিধা হল আরও নিয়ন্ত্রণ, কিন্তু এটি (স্বাভাবিক হিসাবে) আরও কোড সহ আসে, ডিবাগ করার জন্য আরও বেশি, এবং <img> উপাদান ব্যবহার করার চেয়ে আরও এজ কেস বিবেচনা করা হয়।
আপনার যদি ইমেজ ডিকোডিং এর সাথে আরো নিয়ন্ত্রণের প্রয়োজন হয়, createImageBitmap() হল আপনার নতুন সেরা বন্ধু। Chrome 50-এ এটি পরীক্ষা করে দেখুন, এবং আপনি কীভাবে এগিয়ে যাবেন তা আমাদের জানান!