diff --git a/js/common/lib/tensor-conversion-impl.ts b/js/common/lib/tensor-conversion-impl.ts index 22397321e8c6b..b1de48a10c0e1 100644 --- a/js/common/lib/tensor-conversion-impl.ts +++ b/js/common/lib/tensor-conversion-impl.ts @@ -8,10 +8,11 @@ import {Tensor} from './tensor.js'; * implementation of Tensor.toDataURL() */ export const tensorToDataURL = (tensor: Tensor, options?: TensorToDataUrlOptions): string => { - const canvas = document.createElement('canvas'); + const canvas = typeof document !== 'undefined' ? document.createElement('canvas') : (new OffscreenCanvas(1, 1)); canvas.width = tensor.dims[3]; canvas.height = tensor.dims[2]; - const pixels2DContext = canvas.getContext('2d'); + const pixels2DContext = + canvas.getContext('2d') as (CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | null); if (pixels2DContext != null) { // Default values for height and width & format @@ -88,7 +89,11 @@ export const tensorToDataURL = (tensor: Tensor, options?: TensorToDataUrlOptions pixels2DContext.fillRect(j, i, 1, 1); } } - return canvas.toDataURL(); + if ('toDataURL' in canvas) { + return canvas.toDataURL(); + } else { + throw new Error('toDataURL is not supported'); + } } else { throw new Error('Can not access image data'); } @@ -98,7 +103,9 @@ export const tensorToDataURL = (tensor: Tensor, options?: TensorToDataUrlOptions * implementation of Tensor.toImageData() */ export const tensorToImageData = (tensor: Tensor, options?: TensorToImageDataOptions): ImageData => { - const pixels2DContext = document.createElement('canvas').getContext('2d'); + const pixels2DContext = typeof document !== 'undefined' ? + document.createElement('canvas').getContext('2d') : + new OffscreenCanvas(1, 1).getContext('2d') as OffscreenCanvasRenderingContext2D; let image: ImageData; if (pixels2DContext != null) { // Default values for height and width & format diff --git a/js/common/lib/tensor-factory-impl.ts b/js/common/lib/tensor-factory-impl.ts index 7228c4a97055b..19c62cb54bfed 100644 --- a/js/common/lib/tensor-factory-impl.ts +++ b/js/common/lib/tensor-factory-impl.ts @@ -110,13 +110,31 @@ export const tensorFromImage = async( let data: Uint8ClampedArray|undefined; let bufferToTensorOptions: BufferToTensorOptions = options ?? {}; + const createCanvas = () => { + if (typeof document !== 'undefined') { + return document.createElement('canvas'); + } else if (typeof OffscreenCanvas !== 'undefined') { + return new OffscreenCanvas(1, 1); + } else { + throw new Error('Canvas is not supported'); + } + }; + const createCanvasContext = (canvas: HTMLCanvasElement|OffscreenCanvas) => { + if (canvas instanceof HTMLCanvasElement) { + return canvas.getContext('2d'); + } else if (canvas instanceof OffscreenCanvas) { + return canvas.getContext('2d') as OffscreenCanvasRenderingContext2D; + } else { + return null; + } + }; // filling and checking image configuration options if (isHTMLImageEle) { // HTMLImageElement - image object - format is RGBA by default - const canvas = document.createElement('canvas'); + const canvas = createCanvas(); canvas.width = image.width; canvas.height = image.height; - const pixels2DContext = canvas.getContext('2d'); + const pixels2DContext = createCanvasContext(canvas); if (pixels2DContext != null) { let height = image.height; @@ -166,12 +184,12 @@ export const tensorFromImage = async( bufferToTensorOptions.width = width; if (options !== undefined) { - const tempCanvas = document.createElement('canvas'); + const tempCanvas = createCanvas(); tempCanvas.width = width; tempCanvas.height = height; - const pixels2DContext = tempCanvas.getContext('2d'); + const pixels2DContext = createCanvasContext(tempCanvas); if (pixels2DContext != null) { pixels2DContext.putImageData(image, 0, 0); @@ -188,10 +206,10 @@ export const tensorFromImage = async( throw new Error('Please provide image config with format for Imagebitmap'); } - const canvas = document.createElement('canvas'); + const canvas = createCanvas(); canvas.width = image.width; canvas.height = image.height; - const pixels2DContext = canvas.getContext('2d'); + const pixels2DContext = createCanvasContext(canvas); if (pixels2DContext != null) { const height = image.height; @@ -206,8 +224,8 @@ export const tensorFromImage = async( } } else if (isString) { return new Promise((resolve, reject) => { - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); + const canvas = createCanvas(); + const context = createCanvasContext(canvas); if (!image || !context) { return reject(); }