网页链接自动生成二维码的DEMO

wordpress建的教育内容站点，甲方想要每个网页右侧带个二维码，让用户可以手机扫码就能在手机上打开当前网页，本人感觉这个是个伪需求，毕竟都是啥年代了，甲方还要公众号， 还为其专门写了手机版的网站挂在公众号上，感觉1万人也不会超过3个人会扫网页上的这个二维码，奈何甲方就是甲方，遂找了个办法实现了。

<script src="https://cdn.bootcdn.net/ajax/libs/qrious/4.0.2/qrious.js"></script> //引入生成QR的js插件

                      
                        <script>
                     // 获取当前网页的URL
                        var url = window.location.href;
                        
                        // 创建QRious实例，并设置二维码参数
                        var qr = new QRious({
                          element: document.getElementById('qrcode'),  // 指定生成二维码的canvas元素
                          value: url,  // 设置二维码的值为当前网页的URL
                          size: 80  // 设置二维码尺寸为80px
                        });
                      </script>
					  
<canvas id="qrcode"></canvas>  

以上就是完整代码，其中的

  value: url,  // 设置二维码的值为当前网页的URL

就是获取每一个当前打开的网页的网址，然后通过创建一个二维码显示在

<canvas id="qrcode"></canvas>  

中。

本文由 bigwei08028 创作，除注明转载/出处外，均为本站原创，转载前请务必署名
最后编辑时间为: 2024-06-25 09:03 Tuesday