{"record":{"id":"2fdd1af403abed93","repo":"PaddlePaddle/PaddleOCR","slug":"unsupported-image-source-use-a-blob-imagebitmap","errorCode":null,"errorMessage":"Unsupported image source. Use a Blob, ImageBitmap, ImageData, canvas, or img.","messagePattern":"Unsupported image source\\. Use a Blob, ImageBitmap, ImageData, canvas, or img\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"paddleocr-js/packages/core/src/platform/browser.ts","lineNumber":55,"sourceCode":"export async function sourceToImageBitmap(source: ImageSource): Promise<ImageBitmap> {\n  if (typeof ImageBitmap !== \"undefined\" && source instanceof ImageBitmap) return source;\n  if (source instanceof Blob) return createImageBitmap(source);\n  if (hasDomConstructor(\"HTMLCanvasElement\") && source instanceof HTMLCanvasElement) {\n    return createImageBitmap(source);\n  }\n  if (source instanceof ImageData) {\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = source.width;\n    canvas.height = source.height;\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) throw new Error(\"Failed to create a 2D canvas context.\");\n    ctx.putImageData(source, 0, 0);\n    return createImageBitmap(canvas);\n  }\n  if (hasDomConstructor(\"HTMLImageElement\") && source instanceof HTMLImageElement) {\n    return createImageBitmap(source);\n  }\n  throw new Error(\"Unsupported image source. Use a Blob, ImageBitmap, ImageData, canvas, or img.\");\n}\n\nasync function sourceToClonedImageBitmap(source: ImageSource): Promise<ImageBitmap> {\n  if (typeof ImageBitmap !== \"undefined\" && source instanceof ImageBitmap) {\n    return createImageBitmap(source);\n  }\n  return sourceToImageBitmap(source);\n}\n\nexport function bitmapToSourceMat(\n  cv: OpenCv,\n  imageBitmap: ImageBitmap\n): { canvas: HTMLCanvasElement; mat: Mat } {\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = imageBitmap.width;\n  canvas.height = imageBitmap.height;\n  const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n  if (!ctx) throw new Error(\"Failed to create a 2D canvas context.\");","sourceCodeStart":37,"sourceCodeEnd":73,"githubUrl":"https://github.com/PaddlePaddle/PaddleOCR/blob/2661c7c0ef5c613e8f93c6e93b2e052399f0f854/paddleocr-js/packages/core/src/platform/browser.ts#L37-L73","documentation":"sourceToImageBitmap() accepts a closed set of image source types: Blob, ImageBitmap, ImageData, HTMLCanvasElement, and HTMLImageElement. Anything else — a plain object, a string URL, a Buffer, an OffscreenCanvas, a VideoFrame, TypedArray pixel data — falls through all instanceof checks and hits this terminal error telling you which types are supported.","triggerScenarios":"Calling predict('https://example.com/img.png') (URL string not supported), predict(new Uint8Array(...)), predict(video element or VideoFrame), or passing Node-side structures when the browser build is used.","commonSituations":"Assuming URLs are accepted as sources; porting code from server-side OCR APIs that take paths/buffers; trying to feed OffscreenCanvas or video frames.","solutions":["For URLs, fetch and convert first: const blob = await (await fetch(url)).blob(); then pass the Blob.","For video, draw the current frame to a canvas and pass the canvas.","For raw pixels, construct ImageData (or a Blob) instead of passing the raw TypedArray."],"exampleFix":"// before\nconst result = await ocr.predict('https://example.com/doc.png');\n\n// after\nconst blob = await (await fetch('https://example.com/doc.png')).blob();\nconst result = await ocr.predict(blob);","handlingStrategy":"type-guard","validationCode":null,"typeGuard":"type SupportedImageSource = Blob | ImageBitmap | ImageData | HTMLCanvasElement | HTMLImageElement;\nfunction isSupportedImageSource(src: unknown): src is SupportedImageSource {\n  if (typeof Blob !== 'undefined' && src instanceof Blob) return true;\n  if (typeof ImageBitmap !== 'undefined' && src instanceof ImageBitmap) return true;\n  if (typeof ImageData !== 'undefined' && src instanceof ImageData) return true;\n  if (typeof HTMLCanvasElement !== 'undefined' && src instanceof HTMLCanvasElement) return true;\n  if (typeof HTMLImageElement !== 'undefined' && src instanceof HTMLImageElement) return true;\n  return false;\n}","tryCatchPattern":"try {\n  await ocr.predict(source);\n} catch (e) {\n  if (e instanceof Error && e.message.startsWith('Unsupported image source')) {\n    const blob = typeof source === 'string' ? await (await fetch(source)).blob() : source;\n    return ocr.predict(blob as Blob);\n  }\n  throw e;\n}","preventionTips":["Type your app's pipeline inputs as the supported union (Blob | ImageBitmap | ImageData | HTMLCanvasElement | HTMLImageElement) from the start.","Convert URLs to Blob and video frames to canvas at your app boundary, never inside predict() call sites."],"tags":["image-source","usage-error","type-error","browser"],"backgroundTag":null,"analyzedSha":"2661c7c0ef5c613e8f93c6e93b2e052399f0f854","analyzedAt":"2026-08-14T20:17:30.180Z","schemaVersion":2},"datasetVersion":"2026-08-15T22:17:37.221Z"}