Создание тензора из ImageData, HTMLImageElement, ImageBitmap

ONNX Runtime Web (ORT Web) предоставляет средства для запуска моделей машинного обучения непосредственно в браузере, используя JavaScript. Одним из ключевых шагов подготовки данных для модели является преобразование изображений в тензоры. ORT Web поддерживает несколько источников изображений: ImageData, HTMLImageElement и ImageBitmap.

Создание тензора из ImageData

ImageData представляет собой объект с массивом пикселей в формате RGBA и размером изображения. Для передачи данных в ONNX Runtime необходимо конвертировать его в ort.Tensor.

Пример создания тензора из ImageData:

import * as ort from 'onnxruntime-web';

// Предположим, что imageData получено из CanvasRenderingContext2D
const imageData = ctx.getImageData(0, 0, width, height);

// Преобразование в формат [1, 3, H, W] (NCHW)
function imageDataToTensor(imageData) {
    const { data, width, height } = imageData;
    const tensorData = new Float32Array(3 * height * width);
    
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const offset = (y * width + x) * 4;
            tensorData[y * width + x] = data[offset] / 255;               // R
            tensorData[height * width + y * width + x] = data[offset + 1] / 255; // G
            tensorData[2 * height * width + y * width + x] = data[offset + 2] / 255; // B
        }
    }

    return new ort.Tensor('float32', tensorData, [1, 3, height, width]);
}

const inputTensor = imageDataToTensor(imageData);

Особенности:

Пиксели нормализуются в диапазон [0, 1].
Формат [N, C, H, W] часто требуется для моделей, обученных с использованием PyTorch.
Четкое распределение каналов позволяет избежать ошибок при подаче данных в модель.

Создание тензора из HTMLImageElement

HTMLImageElement используется для работы с <img> тегами. Преобразование в тензор включает отрисовку изображения на временном canvas и извлечение ImageData.

Пошаговая конвертация:

function htmlImageToTensor(img) {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, img.width, img.height);
    
    const imageData = ctx.getImageData(0, 0, img.width, img.height);
    return imageDataToTensor(imageData);
}

const imgElement = document.getElementById('myImage');
const inputTensor = htmlImageToTensor(imgElement);

Преимущества метода:

Позволяет работать с любыми изображениями из DOM.
Поддерживает автоматическое масштабирование и обрезку при необходимости.
Легко интегрируется с существующими элементами страницы.

Создание тензора из ImageBitmap

ImageBitmap — это объект, оптимизированный для высокопроизводительной работы с изображениями, особенно в Web Workers и OffscreenCanvas. Преобразование схоже с использованием HTMLImageElement.

Пример использования ImageBitmap:

async function imageBitmapToTensor(bitmap) {
    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
    const ctx = canvas.getContext('2d');
    ctx.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);
    
    const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
    return imageDataToTensor(imageData);
}

// Создание ImageBitmap из HTMLImageElement
const bitmap = await createImageBitmap(imgElement);
const inputTensor = await imageBitmapToTensor(bitmap);

Особенности:

Подходит для асинхронной загрузки и обработки изображений.
Поддерживает работу в фоне без блокировки основного потока.
Экономит память и повышает производительность при обработке больших изображений.

Создание тензора из ImageData, HTMLImageElement, ImageBitmap