https://bigjpg.ai/workers/image-resize.worker.js

1// Image upscaling in a Web Worker via OffscreenCanvas + drawImage.
2// Receives an ImageBitmap (transferred), returns a PNG Blob.
3// Browsers cap canvas to ~16384px per side (Chrome) or ~32767 total area —
4// if target exceeds the cap we clamp and signal the actual factor used.
5
6const MAX_CANVAS_SIDE = 16384;
7
8self.onmessage = async (e) => {
9  const { id, bitmap, zoom, mime = 'image/png', quality } = e.data;
10  try {
11    let targetW = Math.round(bitmap.width * zoom);
12    let targetH = Math.round(bitmap.height * zoom);
13    let actualZoom = zoom;
14
15    // Clamp to browser canvas limits to avoid silent failure.
16    const maxSide = Math.max(targetW, targetH);
17    if (maxSide > MAX_CANVAS_SIDE) {
18      const ratio = MAX_CANVAS_SIDE / maxSide;
19      targetW = Math.round(targetW * ratio);
20      targetH = Math.round(targetH * ratio);
21      actualZoom = Math.round(zoom * ratio * 100) / 100;
22    }
23
24    const canvas = new OffscreenCanvas(targetW, targetH);
25    const ctx = canvas.getContext('2d', { alpha: true });
26    ctx.imageSmoothingEnabled = true;
27    ctx.imageSmoothingQuality = 'high';
28    ctx.drawImage(bitmap, 0, 0, targetW, targetH);
29    bitmap.close();
30
31    const blobOpts = { type: mime };
32    if (quality !== undefined && (mime === 'image/jpeg' || mime === 'image/webp')) {
33      blobOpts.quality = quality;
34    }
35    const blob = await canvas.convertToBlob(blobOpts);
36
37    self.postMessage({ id, blob, width: targetW, height: targetH, actualZoom });
38  } catch (err) {
39    self.postMessage({ id, error: err && err.message ? err.message : String(err) });
40  }
41};