Tensorflow.js视频高斯模糊报错：conv2d输入需4阶张量却得5阶

错误原因 #

核心问题出在图像通道数处理失误：

• ctx.getImageData()返回的是RGBA格式数据，因此tf.browser.fromPixels(frame)生成的张量形状为[height, width, 4]（包含Alpha通道）。
• 你用split(3, 2)尝试将通道轴拆分为3份，但原通道数是4，这会导致第一个分割结果是3维张量[height, width, 3]，后续两次调用expandDims后会得到5维张量[1, height, width, 3, 1]，完全不符合conv2d要求的4维输入格式（[batch, height, width, channels]），从而触发报错。

此前能实现颜色反转，是因为反转操作直接对整个张量处理，不会暴露通道数不匹配的问题。

修复后的完整代码 #

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const uploadForm = document.getElementById('uploadForm');

uploadForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(uploadForm);

    fetch('http://localhost:3000/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.file) {
            const fileURL = `http://localhost:3000/${data.file}`;
            video.src = fileURL;
            video.addEventListener('play', () => {
                processFrame();
            });
        } else {
            console.error('Upload failed:', data.msg);
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
});

// 定义5x5高斯核，形状符合conv2d要求：[filterHeight, filterWidth, inChannels, outChannels]
const gaussianKernel = tf.tensor4d([
    1/256, 4/256, 6/256, 4/256, 1/256,
    4/256, 16/256, 24/256, 16/256, 4/256,
    6/256, 24/256, 36/256, 24/256, 6/256,
    4/256, 16/256, 24/256, 16/256, 4/256,
    1/256, 4/256, 6/256, 4/256, 1/256
], [5, 5, 1, 1]);

const processFrame = () => {
    if (video.paused || video.ended) return;

    // 使用tf.tidy自动清理中间张量，避免内存泄漏
    tf.tidy(() => {
        // 直接从视频元素获取张量，跳过canvas绘制步骤，更高效
        const tensor = tf.browser.fromPixels(video).toFloat();
        // 提取RGB通道，去除Alpha通道（如果存在）
        const rgbTensor = tensor.slice([0, 0, 0], [-1, -1, 3]);
        console.log("RGB Tensor Shape:", rgbTensor.shape);

        // 拆分3个颜色通道，每个通道形状为[height, width]
        const channels = rgbTensor.split(3, 2);
        const blurredChannels = channels.map(channel => {
            // 扩展为4维张量：[batch=1, height, width, channels=1]
            const expandedChannel = channel.expandDims([0, -1]);
            console.log("Expanded Channel Shape:", expandedChannel.shape);

            // 应用卷积模糊
            const blurredChannel = tf.conv2d(expandedChannel, gaussianKernel, 1, 'same');
            // 压缩回2维张量
            return blurredChannel.squeeze();
        });

        // 合并模糊后的通道
        const blurredTensor = tf.concat(blurredChannels, 2);
        // 将浮点张量转换为Uint8格式，符合ImageData要求
        const blurredData = blurredTensor.clipByValue(0, 255).toUint8();
        // 转换为ImageData并绘制到canvas
        tf.browser.toPixels(blurredData, canvas);
    });

    requestAnimationFrame(processFrame);
};

关键优化点 #

1. 通道修正：通过slice([0,0,0], [-1,-1,3])提取RGB通道，确保后续拆分的每个通道都是2维张量。
2. 内存管理：用tf.tidy()包裹张量操作，自动清理中间生成的张量，避免浏览器内存溢出。
3. 性能提升：直接调用tf.browser.fromPixels(video)从视频元素获取张量，省略canvas绘制步骤，加快处理速度。
4. 颜色异常修复：添加clipByValue(0,255)确保模糊后的像素值在合法范围内，再转换为Uint8格式，解决此前可能出现的颜色反转等异常问题。

内容的提问来源于stack exchange，提问作者reallybigbuger