OpenCV WebAssembly版GaussianBlur输出图像错乱问题

问题重现 #

将OpenCV编译为WASM版本进行图像平滑处理，执行GaussianBlur后输出图像出现错乱。代码及现象如下：

// input image RGBA
Mat image(width, height, CV_8UC4, data);
Mat rgb;
Mat blurred;
cvtColor(image, rgb, COLOR_RGBA2RGB);
GaussianBlur(rgb, blurred, Size(3, 3), 0);
Mat out;
cvtColor(blurred, out, COLOR_RGB2RGBA);

// to access the output image
uint8_t *rgba1 = (uint8_t *)malloc(out.dataend - out.data);
memcpy(rgba1, out.data, out.dataend - out.data);

已尝试调整编译配置、使用预构建WASM静态库，问题仍存在。

输入图像：

错乱输出图像：

问题原因 #

OpenCV的Mat默认会做内存对齐（行步长为4的倍数），图像变换后生成的out对象内存可能包含对齐用的冗余字节。直接用out.dataend - out.data计算内存大小并拷贝，会把冗余字节也带入，前端渲染时因像素行偏移导致图像错乱。

修复代码 #

// input image RGBA
Mat image(width, height, CV_8UC4, data);
// 确保输入图像内存连续，避免后续转换引入对齐问题
if (!image.isContinuous()) {
    image = image.clone();
}

Mat rgb, blurred, out;
cvtColor(image, rgb, COLOR_RGBA2RGB);
GaussianBlur(rgb, blurred, Size(3, 3), 0);
cvtColor(blurred, out, COLOR_RGB2RGBA);

// 强制输出为连续内存，消除对齐冗余字节
if (!out.isContinuous()) {
    out = out.clone();
}

// 按实际像素数据大小分配内存：宽×高×4通道（RGBA）
size_t totalBytes = width * height * 4;
uint8_t *rgba1 = (uint8_t *)malloc(totalBytes);
memcpy(rgba1, out.data, totalBytes);

关键说明 #

• isContinuous()用于检查Mat内存是否连续，clone()会生成连续内存的副本
• 直接按width*height*4计算字节数，确保只拷贝有效像素数据，避免冗余字节干扰

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