纯JS解析二维码图片实例页面

识别

方便大家复制的示意图：

.area {
    height: 200px;
    border: 1px dashed skyblue;
    background-color: #fff;
    flex: 1;
    display: grid;
    place-items: center;
}
.area:empty::before {
    content: '或粘贴图片到这里';
    color: gray;
}
.area:focus {
    border-style: solid;
}
.area img {
    max-height: 160px;
    max-width: 90%;
    object-fit: contain;
}

<div id="area" class="area" tabindex="-1"></div>
                    
<p align="center">
    <button id="button" class="button">识别</button>
</p>

<p id="result" align="center"></p>

button.addEventListener('click', function () {
    if ('BarcodeDetector' in window) {
        // 创建检测器
        const barcodeDetector = new BarcodeDetector({
            formats: ['qr_code']
        });

        const eleImg = document.querySelector('#area img');
        if (eleImg) {
            barcodeDetector.detect(eleImg).then((barcodes) => {
                barcodes.forEach((barcode) => {
                    result.innerHTML = `<span class="success">解析成功，结果是：</span>${barcode.rawValue}`;
                });
            }).catch((err) => {
                result.innerHTML = `<span class="error">解析出错：${err}</span>`;
            });
        } else {
            result.innerHTML = `<span class="error">请先粘贴二维码图片</span>`;
        }
    } else {
        result.innerHTML = `<span class="error">当前浏览器不支持二维码识别</span>`;
    }
});