用onnxruntime-web替代onnxjs实现MNIST推理时遇张量维度错误

问题描述 #

1. 画布转Tensor报错 #

尝试从画布图像创建Tensor时触发错误：A tensor's dims must be a number array，相关代码：

const imgData = this.ctx.getImageData(0, 0, this.CANVAS_SIZE, this.CANVAS_SIZE);
let img_arr= new Float32Array(imgData.data); //560 x 560 = 313600
const dims = [1, 1, 560, 560];
const input = new ort.Tensor(img_arr, "float32", dims);

2. CodeSandbox环境问题 #

在CodeSandbox复现问题时遇到两个错误：

• 文件找不到：Unable to open 'ort-web.min.js': File not found (file:///sandbox/node_modules/onnxruntime-web/dist/ort-web.min.js).
• 后续触发：invalid wire type 4 at offset 3

解决方案 #

1. 修复Tensor创建错误 #

onnxruntime-web的Tensor构造函数参数顺序和onnxjs完全不同，正确顺序是数据类型 -> 数据数组 -> 维度数组，而非原代码的(数据数组, 类型, 维度)。同时原代码直接用RGBA四通道数据匹配单通道维度，会导致数据长度不匹配，必须先转成单通道灰度图并归一化：

修改后的代码：

const imgData = this.ctx.getImageData(0, 0, this.CANVAS_SIZE, this.CANVAS_SIZE);
// 将RGBA四通道转成单通道灰度图，并归一化到0-1范围（适配MNIST模型输入要求）
const grayData = [];
for (let i = 0; i < imgData.data.length; i += 4) {
  const gray = (imgData.data[i] + imgData.data[i+1] + imgData.data[i+2]) / 3 / 255;
  grayData.push(gray);
}
const img_arr = new Float32Array(grayData);
const dims = [1, 1, 560, 560];
// 按正确参数顺序创建Tensor
const input = new ort.Tensor("float32", img_arr, dims);

2. 修复CodeSandbox环境问题 #

• 文件找不到问题：改用CDN引入onnxruntime-web，避免本地文件路径问题。在项目的index.html中添加：

<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.16.3/dist/ort.min.js"></script>

同时确保项目已正确安装依赖：执行npm install onnxruntime-web --save，组件内正常导入：

import * as ort from 'onnxruntime-web';

• invalid wire type错误：通常是模型文件损坏或版本不兼容。需确保ONNX模型从PyTorch正确导出，且opset版本与onnxruntime-web兼容。示例导出代码：

import torch
import torchvision

model = torchvision.models.mnist(pretrained=True)
model.eval()
# 注意：若你的模型输入是560x560，需对应调整dummy_input尺寸
dummy_input = torch.randn(1, 1, 28, 28)
torch.onnx.export(model, dummy_input, "mnist.onnx", opset_version=12)

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