二维码解析识别工具

在线解析二维码图片中的内容，上传或粘贴二维码图片即可识别其中的链接、文字，支持截图识别，纯浏览器本地解析不上传。

上传图片文件

或者粘贴图片到这里

</div><div class="field"><label>或者拖拽图片到下方区域</label><div id="t_dropArea" style="border: 2px dashed #ccc; border-radius: 8px; padding: 30px; text-align: center; color: #666; cursor: pointer;">点击选择图片或拖拽图片到此</div></div><div class="result" id="t_result"></div>
  </div>
  <div class="content">
<h2>功能介绍</h2><p>本工具可以直接在您的浏览器中解析识别图片中的二维码内容，支持从本地上传图片、粘贴图片、拖拽图片三种方式，无需上传到服务器，保护隐私安全。</p><h2>使用方法</h2><ul><li>方式一：点击「上传图片文件」按钮，选择包含二维码的图片文件</li><li>方式二：在粘贴区域按下 Ctrl+V 粘贴复制好的二维码图片</li><li>方式三：直接将图片文件拖拽到拖拽区域即可</li></ul><p>识别完成后会直接显示二维码包含的文本内容，如果二维码内容是网址，会提供可点击的链接直接打开。</p><h2>识别原理</h2><p>本工具优先使用浏览器原生的 BarcodeDetector API 进行识别，识别速度更快；如果浏览器不支持原生 API，则自动加载开源 jsQR 库进行解码解析，两种方式都可以准确识别标准 QR 二维码。</p><h2>注意事项</h2><ul><li>请确保图片清晰，二维码完整可见，模糊、变形、遮挡严重的二维码可能无法识别</li><li>本工具仅识别标准 QR 二维码，不支持其他类型条形码（如一维码、PDF417 等）</li><li>识别结果仅供参考，请核对内容准确性</li></ul>
  </div>
  <div class="faq"><details><summary>为什么我上传了包含二维码的图片，却识别不出来？</summary><p>可能是图片模糊、二维码变形、遮挡严重，或者二维码不是标准QR二维码。请尝试使用更清晰的图片重新识别。</p></details><details><summary>这个工具会把我的图片上传到服务器吗？</summary><p>不会，所有解析过程都在您本地浏览器中完成，图片不会上传到任何服务器，保护您的隐私安全。</p></details><details><summary>为什么有的二维码识别结果不对？</summary><p>二维码本身内容错误或者图片质量过低都可能导致识别结果有误，请确认二维码本身正确，并使用清晰的图片重新识别，结果仅供参考。</p></details><details><summary>支持识别其他类型的条形码吗？</summary><p>本工具目前仅支持识别QR二维码，不支持一维条码、PDF417等其他类型的条码。</p></details></div>
  <div class="related">
    <h2>相关工具</h2>
    <div class="chips"><a href="https://www.ayalm.com/tools/base64/">Base64编码解码工具</a><a href="https://www.ayalm.com/tools/url-encode/">URL编码解码工具</a><a href="https://www.ayalm.com/tools/md5/">MD5在线加密工具</a><a href="https://www.ayalm.com/tools/sha-hash/">SHA哈希计算工具</a><a href="https://www.ayalm.com/tools/json-format/">JSON格式化校验工具</a><a href="https://www.ayalm.com/tools/json-to-csv/">JSON转CSV工具</a></div>
  </div>
</main>
<footer class="site-footer">
  <div class="container">
    <div class="cols">
      <div class="col"><h4>在线工具箱</h4><a href="/tools/">全部工具</a><a href="/tools/#text">文本工具</a><a href="/tools/#calc">计算换算</a><a href="/tools/#code">编码开发</a></div>
      <div class="col"><h4>热门工具</h4><a href="https://www.ayalm.com/tools/qrcode-generator/">二维码生成</a><a href="https://www.ayalm.com/tools/json-format/">JSON格式化</a><a href="https://www.ayalm.com/tools/bmi/">BMI计算器</a><a href="https://www.ayalm.com/tools/loan/">贷款计算器</a></div>
      <div class="col"><h4>关于与条款</h4><a href="/tools/about.html">关于我们</a><a href="/tools/contact.html">联系我们</a><a href="/tools/privacy.html">隐私政策</a><a href="/tools/terms.html">使用条款</a></div>
    </div>
    <div class="copy">© 艾蒂娜科技 · 在线工具箱　所有工具均在浏览器本地运行，数据不上传。工具结果仅供参考。</div>
    <div class="copy" style="margin-top:6px"><a href="https://beian.miit.gov.cn/" rel="nofollow noopener" target="_blank" style="color:#9ca3af">苏ICP备17076682号-1</a></div>
  </div>
</footer>
<script>
const fileInput = document.getElementById('t_fileInput');
const dropArea = document.getElementById('t_dropArea');
const pasteArea = document.getElementById('t_pasteArea');
const resultArea = document.getElementById('t_result');
let barcodeDetector = null;

// 初始化BarcodeDetector
if ('BarcodeDetector' in window) {
  barcodeDetector = new BarcodeDetector({ formats: ['qr_code'] });
}

// 加载jsQR库
function loadJsQR() {
  return new Promise((resolve, reject) => {
    if (window.jsQR) {
      resolve(window.jsQR);
      return;
    }
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/jsqr@1.4.0/dist/jsQR.min.js';
    script.onload = () => resolve(window.jsQR);
    script.onerror = reject;
    document.body.appendChild(script);
  });
}

// 处理图片
async function processImage(imageData) {
  resultArea.innerHTML = '<p>正在解析二维码...</p>';
  try {
    let result = null;
    if (barcodeDetector) {
      try {
        const codes = await barcodeDetector.detect(imageData);
        if (codes.length > 0) {
          result = codes[0].rawValue;
        }
      } catch (e) {
        // BarcodeDetector失败，使用jsQR
      }
    }
    if (!result) {
      const jsqr = await loadJsQR();
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      if (imageData instanceof ImageData) {
        canvas.width = imageData.width;
        canvas.height = imageData.height;
        ctx.putImageData(imageData, 0, 0);
      } else if ('naturalWidth' in imageData) {
        canvas.width = imageData.naturalWidth;
        canvas.height = imageData.naturalHeight;
        ctx.drawImage(imageData, 0, 0);
      }
      const imageDataFromCanvas = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const code = jsqr.decode(imageDataFromCanvas.data, canvas.width, canvas.height);
      if (code) {
        result = code.data;
      }
    }
    if (result) {
      showResult(result);
    } else {
      resultArea.innerHTML = '<p style="color: #dc2626;">未识别到二维码，请确保图片清晰且包含完整二维码。</p>';
    }
  } catch (e) {
    resultArea.innerHTML = `<p style="color: #dc2626;">解析失败：${e.message}</p>`;
  }
}

// 显示结果
function showResult(text) {
  let html = '<h3>识别结果：</h3>';
  // 检查是否是链接
  if (/^https?:\/\//.test(text.trim())) {
    html += `<p><a href="${text}" target="_blank" rel="noopener noreferrer">${text}</a></p>`;
  } else {
    html += `<pre style="background: #f5f5f5; padding: 12px; border-radius: 6px; white-space: pre-wrap; word-break: break-all;">${text}</pre>`;
  }
  resultArea.innerHTML = html;
}

// 处理文件
function handleFile(file) {
  if (!file.type.startsWith('image/')) {
    resultArea.innerHTML = '<p style="color: #dc2626;">请上传图片文件。</p>';
    return;
  }
  const img = new Image();
  img.onload = () => processImage(img);
  img.src = URL.createObjectURL(file);
}

// 文件上传事件
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    handleFile(file);
  }
});

// 拖拽事件
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.style.borderColor = '#2563eb';
  dropArea.style.backgroundColor = '#f0f7ff';
});

dropArea.addEventListener('dragleave', () => {
  dropArea.style.borderColor = '#ccc';
  dropArea.style.backgroundColor = 'transparent';
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.style.borderColor = '#ccc';
  dropArea.style.backgroundColor = 'transparent';
  const file = e.dataTransfer.files[0];
  if (file) {
    handleFile(file);
  }
});

dropArea.addEventListener('click', () => {
  fileInput.click();
});

// 粘贴处理
pasteArea.addEventListener('paste', (e) => {
  const items = e.clipboardData.items;
  for (let item of items) {
    if (item.type.indexOf('image') !== -1) {
      const file = item.getAsFile();
      handleFile(file);
      break;
    }
  }
});
</script>
</body>
</html>