图片点击一下变成二维码怎么实现

conkits二维码生成器2026-06-12 07:29

点击图片即可切换为二维码，再次点击恢复原图。功能轻巧实用，部署简单，适配各类网页场景。无需额外插件，运行稳定，适合用于引流、信息展示、线上推广等用途，上手就能使用。

要实现 “点击图片变成二维码”，核心是用 HTML+CSS+JS 做点击切换显示 / 隐藏，或用二维码库动态生成。下面给你两套完整可直接用的方案。

方案一：两张图切换（最简单，推荐）

准备两张图：原图.jpg 和二维码.jpg。

<!DOCTYPE html>
<html>
<body>
  <img id="myImg" src="原图.jpg" style="width:200px;cursor:pointer;">
  <script>
    const img = document.getElementById('myImg');
    let isQr = false;
    img.onclick = function() {
      if (isQr) {
        img.src = '原图.jpg';   // 切回原图
      } else {
        img.src = '二维码.jpg'; // 切到二维码
      }
      isQr = !isQr;
    };
  </script>
</body>
</html>

点击一次：显示二维码

再点击：切回原图

适合：二维码固定不变的场景

方案二：JS 动态生成二维码（无需提前准备二维码图）

用开源库 QRCode.js 动态生成二维码。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
</head>
<body>
  <div id="container">
    <img id="myImg" src="原图.jpg" style="width:200px;cursor:pointer;">
  </div>
  <script>
    const container = document.getElementById('container');
    const img = document.getElementById('myImg');
    let hasQr = false;
    img.onclick = function() {
      if (!hasQr) {
        // 隐藏原图，生成二维码
        img.style.display = 'none';
        const qr = document.createElement('canvas');
        container.appendChild(qr);
        QRCode.toCanvas(qr, 'https://你的链接.com', { width: 200 });
        hasQr = true;
      } else {
        // 显示原图，移除二维码
        img.style.display = 'block';
        container.removeChild(container.lastChild);
        hasQr = false;
      }
    };
  </script>
</body>
</html>

二维码内容可改：把 'https://你的链接.com' 换成你要的文本 / 网址

适合：二维码内容需要动态修改的场景

方案三：弹窗显示二维码（更常用）

点击原图，弹出浮层显示二维码。

<!DOCTYPE html>
<html>
<head>
  <style>
    .modal {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.7);
      text-align: center;
      padding-top: 100px;
    }
    .modal img { width: 200px; }
  </style>
</head>
<body>
  <img id="myImg" src="原图.jpg" style="width:200px;cursor:pointer;">
  
  <div id="qrModal" class="modal">
    <img src="二维码.jpg">
    <p>点击空白处关闭</p>
  </div>
  <script>
    const img = document.getElementById('myImg');
    const modal = document.getElementById('qrModal');
    img.onclick = () => modal.style.display = 'block';
    modal.onclick = (e) => {
      if (e.target === modal) modal.style.display = 'none';
    };
  </script>
</body>
</html>

怎么用？

把代码保存为 index.html

准备好原图.jpg 和二维码.jpg（方案二无需二维码图）

用浏览器打开 index.html 即可测试