في مجال تطوير تطبيقات الويب الحديثة مثل Look Scanned، يُعد تحسين الكفاءة من الأولويات الأساسية، وخاصةً في معالجة الصور. تُعتبر واجهة ImageBitmap أداةً قوية، رغم محدودية انتشارها حالياً، حيث تتيح تحقيق تحسينات ملموسة في الكفاءة. سنستعرض في هذا المقال المزايا الرئيسية لـ ImageBitmap، وفوائدها، وتجربتنا في دمجها مع Look Scanned.

ما هي تقنية ImageBitmap؟

ImageBitmap هي واجهة برمجية من HTML5 مُصممة خصيصاً لمعالجة الصور بكفاءة عالية. تتميز بقدرتها على تنفيذ عمليات فك الترميز ومعالجة الصور خارج المسار الرئيسي للتطبيق، مما يُخفف بشكل ملحوظ من عبء العرض ويُحسّن استجابة التطبيق بشكل عام. يمكن استخدام كائن ImageBitmap مباشرةً في سياقات العرض مثل Canvas 2D أو WebGL، مما يجعلها مثالية للتطبيقات التي تتعامل مع كميات كبيرة من الصور.

لماذا اخترنا ImageBitmap؟

كان Look Scanned يعتمد سابقاً على Blob لنقل بيانات الصور بين وظائف المعالجة. لكن Blob يتطلب عمليات ترميز وفك ترميز مع كل استخدام، مما يفرض قيوداً على الكفاءة. في المقابل، توفر ImageBitmap وصولاً مباشراً لبيانات الصور، مما يُلغي هذه العمليات المتكررة ويُحسّن كفاءة العرض بشكل ملحوظ.

تفاصيل التطبيق

نظراً لضرورة الحفاظ على التوافقية مع المتصفحات القديمة، لم يكن الانتقال الكامل إلى ImageBitmap خياراً متاحاً. لذا، اعتمدنا نهجاً هجيناً يضمن توافقية واسعة. يمكن الاطلاع على تفاصيل الدعم في caniuse.com. إضافةً إلى ذلك، وبسبب قيود Safari في التعامل مع Canvas، نستخدم WebAssembly (WASM) لمعالجة الصور، والذي يتطلب Blob كصيغة إدخال.

بناءً على هذه المعطيات، طوّرنا حلاً هجيناً تدريجياً يدعم كلاً من Blob وImageBitmap. وفيما يلي التفاصيل التقنية الرئيسية:

تحميل وفك ترميز الصور

async function loadImage(url): Promise<ImageBitmap | Blob> {
  const response = await fetch(url);
  const blob = await response.blob();
  if (window.createImageBitmap) {
    return createImageBitmap(blob);
  }
  // الرجوع إلى استخدام Blob
  return blob;
}

التكامل مع WebAssembly

للمعالجة المتقدمة، نقوم بتمرير Blob إلى وحدة WASM، مما يضمن عمل التطبيق في المتصفحات التي لا تدعم ImageBitmap. في هذه العملية، نقوم أولاً برسم الصورة على Canvas ثم نستخدم canvas.toBlob لإنشاء كائن Blob المطلوب.

نظام العرض البديل

async function renderImage(canvas, imageUrl) {
  const ctx = canvas.getContext("2d");
  const image = await loadImage(imageUrl);
  if (image instanceof ImageBitmap) {
    ctx.drawImage(image, 0, 0);
  } else {
    const img = new Image();
    img.src = URL.createObjectURL(image);
    img.onload = () => ctx.drawImage(img, 0, 0);
  }
}

النتائج المُحققة

أدى تطبيق ImageBitmap إلى تخفيض زمن معالجة الصور في Look Scanned من 50 مللي ثانية إلى 20 مللي ثانية للصورة الواحدة. هذا التحسين ملموس بشكل خاص عند معالجة المستندات الممسوحة ضوئياً، مما يوفر تجربة مستخدم أكثر سلاسة وسرعة.

اكتشافات مهمة

خلال عملية التطبيق، توصلنا إلى اكتشاف مثير للاهتمام: إنشاء نسخة جديدة من ImageBitmap قبل نقلها إلى Web Worker يُحقق كفاءة أعلى من نقل الكائن الأصلي مباشرةً. نعتقد أن هذا يرجع إلى التحسينات الداخلية للمتصفح في التعامل مع الكائنات القابلة للنقل.

توافقية المتصفحات

تحظى ImageBitmap حالياً بدعم واسع في المتصفحات الحديثة الرئيسية، بما فيها أحدث إصدارات Chrome وFirefox وEdge وSafari. يمكن الاطلاع على معلومات تفصيلية حول التوافقية في وثائق createImageBitmap على موقع caniuse.com.

الخلاصة والرؤية المستقبلية

لم يقتصر تأثير دمج ImageBitmap في Look Scanned على تحسين الكفاءة بشكل ملحوظ فحسب، بل أتاح أيضاً تطبيق فك الترميز اللامتزامن، والعرض الفعّال، والتكامل المُحسّن مع Web Workers. ورغم أن دعم Blob للمتصفحات القديمة لا يزال ضرورياً، إلا أن الانتقال التدريجي إلى ImageBitmap سيواصل تقديم فوائد جوهرية على المدى البعيد.

جرّب التحسينات بنفسك على Look Scanned!