⬅️ Back to Table of Contents

📄 ImageUtils.js

📊 Analysis Summary

Metric	Count
🔧 Functions	2
🧱 Classes	1
📦 Imports	2
📊 Variables & Constants	3

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Classes

🛠️ File Location:

📂 src/extras/ImageUtils.js

📦 Imports

Name	Source
createElementNS	../utils.js
SRGBToLinear	../math/ColorManagement.js

---

Variables & Constants

Name	Type	Kind	Value	Exported
_canvas	any	let/var	*not shown*	✗
canvas	any	let/var	*not shown*	✗
data	any	let/var	imageData.data	✗

---

Functions

ImageUtils.getDataURL(image: HTMLCanvasElement | HTMLImageElement, type: string): string

JSDoc:

/**
     * Returns a data URI containing a representation of the given image.
     *
     * @param {(HTMLImageElement|HTMLCanvasElement)} image - The image object.
     * @param {string} [type='image/png'] - Indicates the image format.
     * @return {string} The data URI.
     */

Parameters:

• image HTMLCanvasElement | HTMLImageElement
• type string

Returns: string

Calls:

• /^data:/i.test
• createElementNS (from ../utils.js)
• _canvas.getContext
• context.putImageData
• context.drawImage
• canvas.toDataURL

Code

static getDataURL( image, type = 'image/png' ) {

        if ( /^data:/i.test( image.src ) ) {

            return image.src;

        }

        if ( typeof HTMLCanvasElement === 'undefined' ) {

            return image.src;

        }

        let canvas;

        if ( image instanceof HTMLCanvasElement ) {

            canvas = image;

        } else {

            if ( _canvas === undefined ) _canvas = createElementNS( 'canvas' );

            _canvas.width = image.width;
            _canvas.height = image.height;

            const context = _canvas.getContext( '2d' );

            if ( image instanceof ImageData ) {

                context.putImageData( image, 0, 0 );

            } else {

                context.drawImage( image, 0, 0, image.width, image.height );

            }

            canvas = _canvas;

        }

        return canvas.toDataURL( type );

    }

ImageUtils.sRGBToLinear(image: any): any

JSDoc:

/**
     * Converts the given sRGB image data to linear color space.
     *
     * @param {(HTMLImageElement|HTMLCanvasElement|ImageBitmap|Object)} image - The image object.
     * @return {HTMLCanvasElement|Object} The converted image.
     */

Parameters:

• image any

Returns: any

Calls:

• createElementNS (from ../utils.js)
• canvas.getContext
• context.drawImage
• context.getImageData
• SRGBToLinear (from ../math/ColorManagement.js)
• context.putImageData
• image.data.slice
• Math.floor
• console.warn

Internal Comments:

// assuming float (x4)

Code

static sRGBToLinear( image ) {

        if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
            ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
            ( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {

            const canvas = createElementNS( 'canvas' );

            canvas.width = image.width;
            canvas.height = image.height;

            const context = canvas.getContext( '2d' );
            context.drawImage( image, 0, 0, image.width, image.height );

            const imageData = context.getImageData( 0, 0, image.width, image.height );
            const data = imageData.data;

            for ( let i = 0; i < data.length; i ++ ) {

                data[ i ] = SRGBToLinear( data[ i ] / 255 ) * 255;

            }

            context.putImageData( imageData, 0, 0 );

            return canvas;

        } else if ( image.data ) {

            const data = image.data.slice( 0 );

            for ( let i = 0; i < data.length; i ++ ) {

                if ( data instanceof Uint8Array || data instanceof Uint8ClampedArray ) {

                    data[ i ] = Math.floor( SRGBToLinear( data[ i ] / 255 ) * 255 );

                } else {

                    // assuming float

                    data[ i ] = SRGBToLinear( data[ i ] );

                }

            }

            return {
                data: data,
                width: image.width,
                height: image.height
            };

        } else {

            console.warn( 'THREE.ImageUtils.sRGBToLinear(): Unsupported image type. No color space conversion applied.' );
            return image;

        }

    }

---

Classes

ImageUtils

Class Code

class ImageUtils {

    /**
     * Returns a data URI containing a representation of the given image.
     *
     * @param {(HTMLImageElement|HTMLCanvasElement)} image - The image object.
     * @param {string} [type='image/png'] - Indicates the image format.
     * @return {string} The data URI.
     */
    static getDataURL( image, type = 'image/png' ) {

        if ( /^data:/i.test( image.src ) ) {

            return image.src;

        }

        if ( typeof HTMLCanvasElement === 'undefined' ) {

            return image.src;

        }

        let canvas;

        if ( image instanceof HTMLCanvasElement ) {

            canvas = image;

        } else {

            if ( _canvas === undefined ) _canvas = createElementNS( 'canvas' );

            _canvas.width = image.width;
            _canvas.height = image.height;

            const context = _canvas.getContext( '2d' );

            if ( image instanceof ImageData ) {

                context.putImageData( image, 0, 0 );

            } else {

                context.drawImage( image, 0, 0, image.width, image.height );

            }

            canvas = _canvas;

        }

        return canvas.toDataURL( type );

    }

    /**
     * Converts the given sRGB image data to linear color space.
     *
     * @param {(HTMLImageElement|HTMLCanvasElement|ImageBitmap|Object)} image - The image object.
     * @return {HTMLCanvasElement|Object} The converted image.
     */
    static sRGBToLinear( image ) {

        if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
            ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
            ( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {

            const canvas = createElementNS( 'canvas' );

            canvas.width = image.width;
            canvas.height = image.height;

            const context = canvas.getContext( '2d' );
            context.drawImage( image, 0, 0, image.width, image.height );

            const imageData = context.getImageData( 0, 0, image.width, image.height );
            const data = imageData.data;

            for ( let i = 0; i < data.length; i ++ ) {

                data[ i ] = SRGBToLinear( data[ i ] / 255 ) * 255;

            }

            context.putImageData( imageData, 0, 0 );

            return canvas;

        } else if ( image.data ) {

            const data = image.data.slice( 0 );

            for ( let i = 0; i < data.length; i ++ ) {

                if ( data instanceof Uint8Array || data instanceof Uint8ClampedArray ) {

                    data[ i ] = Math.floor( SRGBToLinear( data[ i ] / 255 ) * 255 );

                } else {

                    // assuming float

                    data[ i ] = SRGBToLinear( data[ i ] );

                }

            }

            return {
                data: data,
                width: image.width,
                height: image.height
            };

        } else {

            console.warn( 'THREE.ImageUtils.sRGBToLinear(): Unsupported image type. No color space conversion applied.' );
            return image;

        }

    }

}

Methods

getDataURL(image: HTMLCanvasElement | HTMLImageElement, type: string): string

Code

static getDataURL( image, type = 'image/png' ) {

        if ( /^data:/i.test( image.src ) ) {

            return image.src;

        }

        if ( typeof HTMLCanvasElement === 'undefined' ) {

            return image.src;

        }

        let canvas;

        if ( image instanceof HTMLCanvasElement ) {

            canvas = image;

        } else {

            if ( _canvas === undefined ) _canvas = createElementNS( 'canvas' );

            _canvas.width = image.width;
            _canvas.height = image.height;

            const context = _canvas.getContext( '2d' );

            if ( image instanceof ImageData ) {

                context.putImageData( image, 0, 0 );

            } else {

                context.drawImage( image, 0, 0, image.width, image.height );

            }

            canvas = _canvas;

        }

        return canvas.toDataURL( type );

    }

sRGBToLinear(image: any): any

Code

static sRGBToLinear( image ) {

        if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
            ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
            ( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {

            const canvas = createElementNS( 'canvas' );

            canvas.width = image.width;
            canvas.height = image.height;

            const context = canvas.getContext( '2d' );
            context.drawImage( image, 0, 0, image.width, image.height );

            const imageData = context.getImageData( 0, 0, image.width, image.height );
            const data = imageData.data;

            for ( let i = 0; i < data.length; i ++ ) {

                data[ i ] = SRGBToLinear( data[ i ] / 255 ) * 255;

            }

            context.putImageData( imageData, 0, 0 );

            return canvas;

        } else if ( image.data ) {

            const data = image.data.slice( 0 );

            for ( let i = 0; i < data.length; i ++ ) {

                if ( data instanceof Uint8Array || data instanceof Uint8ClampedArray ) {

                    data[ i ] = Math.floor( SRGBToLinear( data[ i ] / 255 ) * 255 );

                } else {

                    // assuming float

                    data[ i ] = SRGBToLinear( data[ i ] );

                }

            }

            return {
                data: data,
                width: image.width,
                height: image.height
            };

        } else {

            console.warn( 'THREE.ImageUtils.sRGBToLinear(): Unsupported image type. No color space conversion applied.' );
            return image;

        }

    }

---