如何在Javascript中解码具有多个QR图像的图像

Question

我使用 jsQR 进行解码，使用 Jimp 从给定图像制作位图数据。当我尝试使用单个二维码jsQR的图像时，它给出了解码值。但是带有两个二维码的图像，它返回null。那么我们如何解码有两个 QR 图像的图像呢？

感谢您未来的回复:)

Answer 1

这其实是一个相当复杂的问题。如果你检查

jsQR

代码，在

src/locater/index.ts

中，你会发现这个函数：

export function locate(matrix: BitMatrix): QRLocation { ...

此函数执行搜索有效 QR 码的三个角方块的逻辑。

显然，如果你的图像包含两个二维码，那么图像中至少会存在

6

（忽略部分）角点特征，导致

locate

函数出错，导致后续解码失败。

为了处理单个图像中的多个 QR 码，您需要创建一个函数，能够在单个图像中查找 QR 码子图像，并将它们提取为单独的图像进行处理。换句话说，您需要弄清楚如何将图像裁剪为两个二维码，并单独处理每个二维码（除非您能够找到能够执行此过程的库）。

如果您查看

locate

函数的第一部分，您会发现它搜索整个图像，寻找角四边形特征的

MAX_FINDERPATTERNS_TO_SEARCH

实例（当前设置为 4，因此解码时出现错误）。

您可以复制此代码，并构建图像中找到的所有四边形的列表，然后查看它们的空间关系以确定是否找到> 4

四边形，以及正确裁剪图像的最佳位置在哪里。 

Answer 2

需求：zxing-wasm 和 canvas。安装它们。

• https://www.npmjs.com/package/zxing-wasm?activeTab=readme

• https://www.npmjs.com/package/canvas

  接口 ImageDataWithColorSpace 扩展 ImageData { colorSpace：预定义的ColorSpace； }
  函数 imageData(myimg: 图像) { const { 宽度, 高度 } = myimg;

  const canvas = createCanvas(width, height);
  const context = canvas.getContext('2d');
  
  context.drawImage(myimg, 0, 0, width, height);
  
  return context.getImageData(0, 0, width, height) as ImageDataWithColorSpace;

  }
  router.get('/qr', async (req, res) => { const readerOptions: ReaderOptions = { 格式：['QRCode'], };

  const filePath = path.join(__dirname, '../src/test QR.png');
  const myimg = await loadImage(filePath);
  
  const imgData = imageData(myimg);
  
  const imageFileReadResults = await readBarcodesFromImageData(imgData, readerOptions);
  
  res.send(imageFileReadResults);

  });