TensorFlow.js fromPixels与img标签

本页面演示了如何使用TensorFlow.js的tf.browser.fromPixels方法直接从img标签创建张量，无需通过Canvas转换。

图像预览

上传图片

张量数据

图像宽度: 0

图像高度: 0

张量形状: -

数据类型: -

总像素数: 0

数据大小: -

图像处理操作

像素数据预览 (前100个像素)

TensorFlow.js fromPixels方法

tf.browser.fromPixels 方法可以直接从多种HTML元素创建张量，包括：

HTMLImageElement (img标签)
HTMLCanvasElement (canvas标签)
HTMLVideoElement (video标签)
ImageData (图像数据对象)

// 直接从img元素创建张量
                const img = document.getElementById('my-image');
                const tensor = tf.browser.fromPixels(img);

                // 张量的形状为 [height, width, 3]
                // 其中3表示RGB三个通道
                console.log(tensor.shape); // 例如: [300, 400, 3]

                // 也可以指定通道数 (例如处理灰度图像)
                const grayscaleTensor = tf.browser.fromPixels(img, 1);

使用 tf.browser.fromPixels 直接从img标签创建张量比先绘制到Canvas再获取ImageData更加高效，特别是在需要频繁处理图像时。

这种方法广泛应用于机器学习模型的图像输入预处理、实时图像分析和计算机视觉应用。