Keras加载200x600图像显示变形及TensorFlow.js形状不匹配问题咨询

问题诱因 #

• 接口参数的维度顺序和日常表述习惯相反：tf.keras.preprocessing.image_dataset_from_directory的image_size参数约定顺序为(高度, 宽度)，和你日常说的「200×600（宽×高）」顺序完全相反。你最初填(200, 600)时，相当于强制把图像resize为高200、宽600，和原始比例完全颠倒，所以pyplot展示会出现拉伸变形；改为(600,200)后匹配了原始图像的高宽，显示自然恢复正常。
• 前后端resize维度不统一：TensorFlow.js的resizeNearestNeighbor方法的参数顺序同样是[目标高度, 目标宽度]，你当前前端代码传的[200, 600]对应输出形状是高200、宽600，和Keras训练时模型接收的输入形状（高600、宽200）不匹配，因此会报错。

解决方法 #

方案一（推荐，无需重新训练） #

直接对齐前端resize参数和训练端的输入形状，把TF.js侧代码修改为：

let tensorImg = tf.browser.fromPixels(canvas).resizeNearestNeighbor([600, 200]).toFloat().expandDims();

如果前端canvas本身比例和200（宽）:600（高）不一致，需要提前调整canvas尺寸比例，避免前端预处理阶段就出现图像变形。

方案二（需重新训练模型） #

如果要保留当前TF.js侧的resize参数，就调整Keras侧训练逻辑：

• 把image_size改回(200, 600)
• pyplot展示时交换图像数组的高宽维度，避免显示变形，示例代码：

import numpy as np
# img为image_dataset_from_directory输出的单张图像数组，形状为(200, 600, 3)
plt.imshow(np.transpose(img, (1, 0, 2)))

重新训练后模型输入形状就和前端输出的张量形状匹配。

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