@woosh/meep-engine/src/engine/asset/loaders/image/codec/NativeImageDecoder.js

Pure JavaScript game engine. Fully featured and production ready.

import { Codec } from "./Codec.js";

/**
 *
 * @param {Image|ImageBitmap|HTMLImageElement} img
 * @returns {Uint8Array}
 */
function decode(img) {
    const imgWidth = img.width;
    const imgHeight = img.height;

    //
    const canvas = document.createElement('canvas');

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    context.drawImage(img, 0, 0, imgWidth, imgHeight);

    const imgd = context.getImageData(0, 0, imgWidth, imgHeight);

    return imgd.data;
}

export class NativeImageDecoder extends Codec {
    async decode(data) {
        const image = new Image();

        // convert binary data to image URL that we can load
        const blob = new Blob([data]);
        const url = URL.createObjectURL(blob);

        image.src = url;

        // give browser a chance to decode image in async
        await image.decode();

        const rgba_data = decode(image);

        const width = image.width;
        const height = image.height;

        // release resources
        URL.revokeObjectURL(url);

        return {
            data: rgba_data,
            width: width,
            height: height,
            itemSize: 4,
            bitDepth: 8
        };
    }
}