Look Scanned میں ImageBitmap کے ذریعے 60% کارکردگی میں اضافہ

جدید ویب ایپلیکیشنز جیسے Look Scanned بناتے وقت کارکردگی کی بہتری انتہائی اہم ہے، خاص طور پر جب تصاویر کے ساتھ کام کریں۔ اہم کارکردگی کی بہتری حاصل کرنے کے لیے ایک طاقتور لیکن کم استعمال ہونے والا ٹول ImageBitmap interface ہے۔ اس blog post میں ہم دیکھیں گے کہ ImageBitmap کیا ہے، یہ کیوں مؤثر ہے، اور Look Scanned میں rendering performance بہتر بنانے کے لیے اسے کیسے integrate کیا گیا ہے۔

ImageBitmap کیا ہے؟

ImageBitmap ایک HTML5 interface ہے جو bitmap image کی نمائندگی کرتا ہے۔ یہ main thread کے باہر موثر image decoding اور processing کو فعال کرتا ہے، rendering overhead کم کرتا ہے اور responsiveness بہتر بناتا ہے۔ ایک بار بننے کے بعد، ImageBitmap object کو Canvas 2D یا WebGL جیسے rendering contexts میں براہ راست استعمال کیا جا سکتا ہے، جو اسے image-heavy applications کے لیے ایک طاقتور ٹول بناتا ہے۔

Look Scanned میں ImageBitmap کا استعمال کیوں؟

پہلے، Look Scanned processing functions کے درمیان image data منتقل کرنے کے لیے Blob پر انحصار کرتا تھا۔ تاہم، Blob performance optimization کے لیے مثالی نہیں ہے کیونکہ اس میں encoding اور decoding کے steps کی ضرورت ہوتی ہے۔ اس کے برعکس، ImageBitmap image data تک براہ راست رسائی فراہم کرتا ہے، غیر ضروری decoding operations کو ختم کرتا ہے اور rendering performance کو نمایاں طور پر بہتر بناتا ہے۔

ہم Look Scanned میں ImageBitmap کا استعمال کیسے کرتے ہیں

Look Scanned پرانے browsers کو support کرتا ہے، اس لیے یہ Blob کی support برقرار رکھے بغیر مکمل طور پر ImageBitmap پر منتقل نہیں ہو سکتا۔ یہ دوہری support browsers کی وسیع رینج میں compatibility یقینی بناتی ہے۔ browser compatibility کی تفصیلات کے لیے caniuse.com دیکھیں۔ مزید برآں، Safari کی محدود canvas support کی وجہ سے image processing کے لیے WebAssembly (WASM) کا استعمال ضروری ہے، جس میں Blob کو input format کے طور پر درکار ہوتا ہے۔

اس کو manage کرنے کے لیے، Look Scanned ایک hybrid approach استعمال کرتا ہے جو Blob اور ImageBitmap دونوں کو support کرتا ہے جبکہ بتدریج بعد والے پر منتقل ہوتا ہے۔ نیچے اہم implementation details ہیں:

Loading اور Decoding

async function loadImage(url): Promise<ImageBitmap | Blob> {
  const response = await fetch(url);
  const blob = await response.blob();
  if (window.createImageBitmap) {
    return createImageBitmap(blob);
  }
  // Blob استعمال کرنے کا fallback
  return blob;
}

WebAssembly Integration

پیچیدہ processing کے لیے، Blob کو WASM میں بھیجا جاتا ہے تاکہ غیر supported browsers میں بھی functionality یقینی بنائی جا سکے۔ ہمیں پہلے image کو canvas پر draw کرنا ہوگا اور پھر canvas.toBlob استعمال کرکے Blob حاصل کرنا ہوگا۔

Fallback Rendering

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 کے integration سے، Look Scanned نے image processing times میں نمایاں کمی حاصل کی ہے—فی image 50ms سے 20ms تک۔ یہ بہتری زیادہ smooth اور responsive user experience میں تبدیل ہوتی ہے، خاص طور پر scanned documents والے tasks کے لیے۔

غیر متوقع دریافتیں

Implementation کے دوران، ہم نے دریافت کیا کہ createImageBitmap استعمال کرکے نیا ImageBitmap copy بنانا اسے worker میں transfer کرنے سے پہلے، original object کو directly pass کرنے سے بہتر performance دیتا ہے۔ یہ رفتار transferable objects کے لیے browser engine optimizations کی وجہ سے ہو سکتی ہے۔

Browser Support

ImageBitmap اکثر جدید browsers میں supported ہے، بشمول Chrome, Firefox, Edge, اور Safari کے latest versions۔ compatibility کی تفصیلات کے لیے createImageBitmap in caniuse.com چیک کریں۔

خلاصہ

Look Scanned میں ImageBitmap کا integration نے asynchronous decoding، موثر rendering، اور Web Workers کے ساتھ بہتر compatibility کو فعال کرکے کارکردگی میں واضح بہتری لائی ہے۔ جبکہ پرانے browsers کی support برقرار رکھنا Blob کا مسلسل استعمال ضروری بناتا ہے، ImageBitmap کی طرف بتدریج migration طویل مدتی کارکردگی کے فوائد یقینی بناتی ہے۔

ان پیش قدمیوں سے فائدہ اٹھاکر، Look Scanned اپنے users کے لیے تیز اور زیادہ responsive تجربہ فراہم کرتا ہے۔ اسے آزمائیں اور فرق خود محسوس کریں!