如何使用JS解码本地PNG格式QR码？Cypress测试场景下的实现疑问

你遇到的Failed to load image报错是因为@nuintun/qrcode的scan方法依赖浏览器端的Image API，而Cypress的onAfterScreenshot回调运行在Node环境，没有对应的浏览器API，所以可以按以下方案使用decode方法实现需求：

步骤1：安装依赖 #

需要用到sharp库处理本地PNG图片，提取像素数据和宽高信息：

npm install sharp @nuintun/qrcode --save-dev

步骤2：修改测试代码 #

// 顶部引入依赖
const sharp = require('sharp');
const { decode } = require('@nuintun/qrcode');

it('Takes QR Code Screenshot and Read QR Image', () => {
    cy.get('#image').screenshot('qrcode', {
        onAfterScreenshot($el, props) {
            // 用Cypress.Promise包裹异步逻辑，避免测试提前结束
            return new Cypress.Promise(async (resolve, reject) => {
                try {
                    const imageProcessor = sharp(props.path);
                    // 获取图片宽高
                    const { width, height } = await imageProcessor.metadata();
                    // 提取原始像素数据
                    const pixelBuffer = await imageProcessor.raw().toBuffer();
                    // 转换为decode需要的Uint8ClampedArray格式
                    const clampedPixelData = new Uint8ClampedArray(pixelBuffer);
                    // 解码QR码
                    const decodeResult = decode(clampedPixelData, width, height);
                    // 存储解码结果供后续断言使用
                    Cypress.env('qrCodeContent', decodeResult.data);
                    resolve();
                } catch (error) {
                    reject(`QR码解码失败: ${error.message}`);
                }
            })
        }
    })

    // 示例：断言QR码内容
    cy.then(() => {
        const qrContent = Cypress.env('qrCodeContent');
        console.log('QR码解码结果：', qrContent);
        // 替换为你实际的断言逻辑
        expect(qrContent).to.match(/^https?:\/\//);
    })
});

优化建议 #

• 如果QR码识别率低，可以在sharp处理时添加预处理逻辑提升识别率：

  const pixelBuffer = await imageProcessor
    .removeAlpha() // 移除透明通道
    .grayscale() // 转为灰度图
    .contrast(1.5) // 提升对比度
    .raw()
    .toBuffer();
  

• 截图时可以设置padding参数避免QR码紧贴截图边缘，进一步提升识别准确率。

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