يدعم Chrome createImageBitmap() في Chrome 50

Paul Lewis

يُعد فك ترميز الصور للاستخدام مع لوحة الرسم أمرًا شائعًا جدًا، سواء كان ذلك للسماح للمستخدمين بتخصيص صورة رمزية أو اقتصاص صورة أو مجرد تكبير صورة. تكمن مشكلة فك ترميز الصور في أنها قد تستهلك وحدة المعالجة المركزية (CPU)، وهذا قد يعني أحيانًا التوقُّف عن العمل أو استخدام رقاقات التحقق. بدءًا من Chrome 50 (وفي Firefox 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));

سيعمل هذا المنهج أيضًا مع الصور المخزنة كنقاط نقطية في قاعدة البيانات المفهرسة، ما يجعل النقاط ذات تنسيق متوسط مناسب. وأثناء حدوث ذلك، يتوافق 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 تلقائيًا لفك الترميز في سلسلة محادثات أخرى، ما يساعد في تقليل أعباء العمل على سلسلة التعليمات الرئيسية. ومع ذلك، يجب أن تضع في اعتبارك القيام بفك الترميز على سلسلة التعليمات الرئيسية، لأنها عمل مكثّف قد يمنع المهام الأساسية الأخرى، مثل JavaScript أو حسابات الأنماط أو التخطيط أو الرسم أو الإنشاء.

مكتبة المساعدة

لتسهيل هذه العملية، أنشأت مكتبة مساعِدة تتناول عملية فك الترميز لدى العامل، وترسل الصورة التي تم فك ترميزها إلى سلسلة التعليمات الرئيسية وترسمها على شكل لوحة. وينبغي لك، بالطبع، عدم التردد في إجراء هندسة عكسية له وتطبيق النموذج على تطبيقاتك الخاصة. وتتمثّل الفائدة الرئيسية في المزيد من التحكّم، ولكنّ ذلك (كالعادة) يأتي مع المزيد من الرموز البرمجية وتصحيح الأخطاء والمزيد من الحالات الهامشية التي يجب أخذها في الاعتبار مقارنةً باستخدام عنصر <img>.

إذا كنت بحاجة إلى مزيد من التحكّم من خلال فك ترميز الصور، يمكنك استخدام "createImageBitmap()" كصديق لك جديد. يمكنك تجربته في Chrome 50، وإخبارنا عن كيفية استخدامك له.