在JavaScript中如何用OpenCV读取通过url.createObjectURL转换的Blob图片文件

问题原因 #

OpenCV的imread函数不支持直接解析blob:协议的URL字符串：

• 浏览器端的OpenCV.js仅支持接收已完成加载的img DOM元素作为入参
• Node.js环境的OpenCV依赖仅支持读取本地文件系统的绝对路径

浏览器环境解决方案（推荐） #

通过img元素中转即可，你可以直接使用已生成的blob URL：

// 你现有的blob URL
const blobUrl = 'blob:http://localhost:3000/3984a709-43ba-49cl-9075-e6b6923a75e2';

const img = new Image();
img.src = blobUrl;
img.onload = function() {
  // 直接将加载完成的img元素传入imread
  const imgMat = cv.imread(img);
  
  // 此处写你的业务逻辑处理imgMat
  // ...

  // 处理完成后记得释放内存避免泄漏
  imgMat.delete();
}

Node.js环境解决方案 #

blob:协议是浏览器端的临时内存地址，Node环境无法直接访问，你需要先将图片内容写入本地临时文件，再传入临时文件路径给imread：

const fs = require('fs');
const path = require('path');

// 假设你已经获取到blob对应的二进制Buffer
const tempImgPath = path.join(__dirname, './temp_loading_img.png');
// 写入本地临时文件
fs.writeFileSync(tempImgPath, blobBuffer);
// 读取本地文件生成Mat
const imgMat = cv.imread(tempImgPath);

// 业务逻辑处理
// ...

// 处理完成后删除临时文件+释放内存
fs.unlinkSync(tempImgPath);
imgMat.delete();

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