[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-10129":3},{"id":4,"type":5,"seo_title":6,"seo_keyword":6,"seo_desc":7,"article_title":6,"article_image":8,"article_icon":9,"article_desc":7,"article_content":10,"detail_image":9,"read_num":11,"status":5,"is_del":12,"question":13,"create_time":14,"update_time":14},10129,1,"图片点击一下变成二维码怎么实现","点击图片即可切换为二维码，再次点击恢复原图。功能轻巧实用，部署简单，适配各类网页场景。无需额外插件，运行稳定，适合用于引流、信息展示、线上推广等用途，上手就能使用。","https:\u002F\u002Frescdn.conkits.cn\u002F20260612\u002F二维码制作_17792677421392.jpg",null,"\u003Cdiv data-zone-id=\"0\" data-line-index=\"0\" data-line=\"true\" style=\"white-space-collapse: preserve;\">要实现 “点击图片变成二维码”，核心是用 HTML+CSS+JS 做\u003Cb>点击切换显示 \u002F 隐藏\u003C\u002Fb>，或用\u003Cb>二维码库动态生成\u003C\u002Fb>。下面给你两套完整可直接用的方案。\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"1\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Cspan class=\"horizontal-line\">\u003Chr class=\"horizontal-line\">\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"2\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Ch3 class=\"heading-h3\">方案一：两张图切换（最简单，推荐）\u003C\u002Fh3>\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"3\" data-line=\"true\" style=\"white-space-collapse: preserve;\">准备两张图：原图.jpg 和 二维码.jpg。\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"4\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Cpre>\u003Ccode>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"0\" data-line=\"true\">&lt;!DOCTYPE html&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"1\" data-line=\"true\">&lt;html&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"2\" data-line=\"true\">&lt;body&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"3\" data-line=\"true\">  &lt;img id=\"myImg\" src=\"原图.jpg\" style=\"width:200px;cursor:pointer;\"&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"4\" data-line=\"true\">\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"5\" data-line=\"true\">  &lt;script&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"6\" data-line=\"true\">    const img = document.getElementById('myImg');\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"7\" data-line=\"true\">    let isQr = false;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"8\" data-line=\"true\">\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"9\" data-line=\"true\">    img.onclick = function() {\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"10\" data-line=\"true\">      if (isQr) {\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"11\" data-line=\"true\">        img.src = '原图.jpg';   \u002F\u002F 切回原图\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"12\" data-line=\"true\">      } else {\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"13\" data-line=\"true\">        img.src = '二维码.jpg'; \u002F\u002F 切到二维码\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"14\" data-line=\"true\">      }\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"15\" data-line=\"true\">      isQr = !isQr;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"16\" data-line=\"true\">    };\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"17\" data-line=\"true\">  &lt;\u002Fscript&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"18\" data-line=\"true\">&lt;\u002Fbody&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"dR0sOj1G4k65ijFceQOu\" data-line-index=\"19\" data-line=\"true\">&lt;\u002Fhtml&gt;\u003C\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cul start=\"1\" style=\"margin-top: 0px; margin-bottom: 0px; padding-left: 0px; list-style-position: inside;\">\u003Cli class=\"temp-li bullet1\" data-line=\"true\" data-list=\"bullet1\" style=\"line-height: 1.6; margin-top: 0px; margin-bottom: 0px; list-style-type: disc; list-style-position: outside; margin-left: 0px; padding-left: 0px;\">点击一次：显示二维码\u003C\u002Fli>\u003C\u002Ful>\u003Cul start=\"1\" style=\"margin-top: 0px; margin-bottom: 0px; padding-left: 0px; list-style-position: inside;\">\u003Cli class=\"temp-li bullet1\" data-line=\"true\" data-list=\"bullet1\" style=\"line-height: 1.6; margin-top: 0px; margin-bottom: 0px; list-style-type: disc; list-style-position: outside; margin-left: 0px; padding-left: 0px;\">再点击：切回原图\u003C\u002Fli>\u003C\u002Ful>\u003Cul start=\"1\" style=\"margin-top: 0px; margin-bottom: 0px; padding-left: 0px; list-style-position: inside;\">\u003Cli class=\"temp-li bullet1\" data-line=\"true\" data-list=\"bullet1\" style=\"line-height: 1.6; margin-top: 0px; margin-bottom: 0px; list-style-type: disc; list-style-position: outside; margin-left: 0px; padding-left: 0px;\">适合：二维码固定不变的场景\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv data-zone-id=\"0\" data-line-index=\"8\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Cspan class=\"horizontal-line\">\u003Chr class=\"horizontal-line\">\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"9\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Ch3 class=\"heading-h3\">方案二：JS 动态生成二维码（无需提前准备二维码图）\u003C\u002Fh3>\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"10\" data-line=\"true\" style=\"white-space-collapse: preserve;\">用开源库 QRCode.js 动态生成二维码。\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"11\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Cpre>\u003Ccode>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"0\" data-line=\"true\">&lt;!DOCTYPE html&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"1\" data-line=\"true\">&lt;html&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"2\" data-line=\"true\">&lt;head&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"3\" data-line=\"true\">  &lt;script src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fqrcode@1.5.1\u002Fbuild\u002Fqrcode.min.js\"&gt;&lt;\u002Fscript&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"4\" data-line=\"true\">&lt;\u002Fhead&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"5\" data-line=\"true\">&lt;body&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"6\" data-line=\"true\">  &lt;div id=\"container\"&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"7\" data-line=\"true\">    &lt;img id=\"myImg\" src=\"原图.jpg\" style=\"width:200px;cursor:pointer;\"&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"8\" data-line=\"true\">  &lt;\u002Fdiv&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"9\" data-line=\"true\">\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"10\" data-line=\"true\">  &lt;script&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"11\" data-line=\"true\">    const container = document.getElementById('container');\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"12\" data-line=\"true\">    const img = document.getElementById('myImg');\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"13\" data-line=\"true\">    let hasQr = false;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"14\" data-line=\"true\">\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"15\" data-line=\"true\">    img.onclick = function() {\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"16\" data-line=\"true\">      if (!hasQr) {\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"17\" data-line=\"true\">        \u002F\u002F 隐藏原图，生成二维码\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"18\" data-line=\"true\">        img.style.display = 'none';\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"19\" data-line=\"true\">        const qr = document.createElement('canvas');\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"20\" data-line=\"true\">        container.appendChild(qr);\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"21\" data-line=\"true\">        QRCode.toCanvas(qr, 'https:\u002F\u002F你的链接.com', { width: 200 });\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"22\" data-line=\"true\">        hasQr = true;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"23\" data-line=\"true\">      } else {\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"24\" data-line=\"true\">        \u002F\u002F 显示原图，移除二维码\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"25\" data-line=\"true\">        img.style.display = 'block';\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"26\" data-line=\"true\">        container.removeChild(container.lastChild);\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"27\" data-line=\"true\">        hasQr = false;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"28\" data-line=\"true\">      }\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"29\" data-line=\"true\">    };\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"30\" data-line=\"true\">  &lt;\u002Fscript&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"31\" data-line=\"true\">&lt;\u002Fbody&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"eqnJaUVKlIsv7LV9MVdh\" data-line-index=\"32\" data-line=\"true\">&lt;\u002Fhtml&gt;\u003C\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cul start=\"1\" style=\"margin-top: 0px; margin-bottom: 0px; padding-left: 0px; list-style-position: inside;\">\u003Cli class=\"temp-li bullet1\" data-line=\"true\" data-list=\"bullet1\" style=\"line-height: 1.6; margin-top: 0px; margin-bottom: 0px; list-style-type: disc; list-style-position: outside; margin-left: 0px; padding-left: 0px;\">二维码内容可改：把 'https:\u002F\u002F你的链接.com' 换成你要的文本 \u002F 网址\u003C\u002Fli>\u003C\u002Ful>\u003Cul start=\"1\" style=\"margin-top: 0px; margin-bottom: 0px; padding-left: 0px; list-style-position: inside;\">\u003Cli class=\"temp-li bullet1\" data-line=\"true\" data-list=\"bullet1\" style=\"line-height: 1.6; margin-top: 0px; margin-bottom: 0px; list-style-type: disc; list-style-position: outside; margin-left: 0px; padding-left: 0px;\">适合：二维码内容需要动态修改的场景\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv data-zone-id=\"0\" data-line-index=\"14\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Cspan class=\"horizontal-line\">\u003Chr class=\"horizontal-line\">\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"15\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Ch3 class=\"heading-h3\">方案三：弹窗显示二维码（更常用）\u003C\u002Fh3>\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"16\" data-line=\"true\" style=\"white-space-collapse: preserve;\">点击原图，弹出浮层显示二维码。\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"17\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Cpre>\u003Ccode>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"0\" data-line=\"true\">&lt;!DOCTYPE html&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"1\" data-line=\"true\">&lt;html&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"2\" data-line=\"true\">&lt;head&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"3\" data-line=\"true\">  &lt;style&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"4\" data-line=\"true\">    .modal {\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"5\" data-line=\"true\">      display: none;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"6\" data-line=\"true\">      position: fixed;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"7\" data-line=\"true\">      top: 0; left: 0;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"8\" data-line=\"true\">      width: 100%; height: 100%;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"9\" data-line=\"true\">      background: rgba(0,0,0,0.7);\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"10\" data-line=\"true\">      text-align: center;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"11\" data-line=\"true\">      padding-top: 100px;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"12\" data-line=\"true\">    }\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"13\" data-line=\"true\">    .modal img { width: 200px; }\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"14\" data-line=\"true\">  &lt;\u002Fstyle&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"15\" data-line=\"true\">&lt;\u002Fhead&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"16\" data-line=\"true\">&lt;body&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"17\" data-line=\"true\">  &lt;img id=\"myImg\" src=\"原图.jpg\" style=\"width:200px;cursor:pointer;\"&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"18\" data-line=\"true\">  \u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"19\" data-line=\"true\">  &lt;div id=\"qrModal\" class=\"modal\"&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"20\" data-line=\"true\">    &lt;img src=\"二维码.jpg\"&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"21\" data-line=\"true\">    &lt;p&gt;点击空白处关闭&lt;\u002Fp&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"22\" data-line=\"true\">  &lt;\u002Fdiv&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"23\" data-line=\"true\">\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"24\" data-line=\"true\">  &lt;script&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"25\" data-line=\"true\">    const img = document.getElementById('myImg');\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"26\" data-line=\"true\">    const modal = document.getElementById('qrModal');\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"27\" data-line=\"true\">\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"28\" data-line=\"true\">    img.onclick = () =&gt; modal.style.display = 'block';\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"29\" data-line=\"true\">    modal.onclick = (e) =&gt; {\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"30\" data-line=\"true\">      if (e.target === modal) modal.style.display = 'none';\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"31\" data-line=\"true\">    };\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"32\" data-line=\"true\">  &lt;\u002Fscript&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"33\" data-line=\"true\">&lt;\u002Fbody&gt;\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"k5luAK2LXTsF0yNoIJME\" data-line-index=\"34\" data-line=\"true\">&lt;\u002Fhtml&gt;\u003C\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"18\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Cspan class=\"horizontal-line\">\u003Chr class=\"horizontal-line\">\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"19\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Ch3 class=\"heading-h3\">怎么用？\u003C\u002Fh3>\u003C\u002Fdiv>\u003Col start=\"1\" style=\"margin-top: 0px; margin-bottom: 0px; padding-left: 0px; list-style-position: inside;\">\u003Cli class=\"temp-li number1\" data-line=\"true\" data-list=\"number1\" data-ol-id=\"xpjzZLjf\" data-start=\"1\" style=\"line-height: 1.6; margin-top: 0px; margin-bottom: 0px; list-style-type: decimal; list-style-position: outside; margin-left: 0px; padding-left: 0px;\">把代码保存为 index.html\u003C\u002Fli>\u003C\u002Fol>\u003Col start=\"2\" style=\"margin-top: 0px; margin-bottom: 0px; padding-left: 0px; list-style-position: inside;\">\u003Cli class=\"temp-li number1\" data-line=\"true\" data-list=\"number1\" data-ol-id=\"RflrJ4u8\" data-start=\"2\" style=\"line-height: 1.6; margin-top: 0px; margin-bottom: 0px; list-style-type: decimal; list-style-position: outside; margin-left: 0px; padding-left: 0px;\">准备好 原图.jpg 和 二维码.jpg（方案二无需二维码图）\u003C\u002Fli>\u003C\u002Fol>\u003Col start=\"3\" style=\"margin-top: 0px; margin-bottom: 0px; padding-left: 0px; list-style-position: inside;\">\u003Cli class=\"temp-li number1\" data-line=\"true\" data-list=\"number1\" data-ol-id=\"t0ihzwF1\" data-start=\"3\" style=\"line-height: 1.6; margin-top: 0px; margin-bottom: 0px; list-style-type: decimal; list-style-position: outside; margin-left: 0px; padding-left: 0px;\">用浏览器打开 index.html 即可测试\u003C\u002Fli>\u003C\u002Fol>\u003Cdiv data-zone-id=\"0\" data-line-index=\"23\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Cspan class=\"horizontal-line\">\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv data-zone-id=\"0\" data-line-index=\"24\" data-line=\"true\" style=\"white-space-collapse: preserve;\">\u003Cbr>\u003C\u002Fdiv>",36,0,[],1781249380]