首页html二维码生成器代码

html二维码生成器代码

时间: 2024-10-26 22:03:59 浏览: 25

HTML5本身并没有内置的二维码生成器，因为这通常涉及到JavaScript库或服务。然而，你可以使用JavaScript库如`qrcodejs`、`jsqrcode` 或者在线服务如`qrcode-generator`来在网页上动态生成二维码。以下是一个简单的使用`html2canvas`和`qrcode.js`生成二维码的HTML示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/qrcode.js@1.3.6"></script> </head> <body> <div id="qr-code-container">  <input type="text" id="content" value="http://example.com"> </div> <button onclick="generateQR()">生成二维码</button> <script> function generateQR() { var content = document.getElementById('content').value; var qrElement = document.createElement('div'); qrElement.innerHTML = qrcode.draw(content); // 使用html2canvas将二维码转换为图片 html2canvas(qrElement).then(function(canvas) { // 将canvas转换为img元素并插入到页面 var img = document.createElement('img'); img.src = canvas.toDataURL(); document.body.appendChild(img); }); } </script> </body> </html> ``` 在这个例子中，用户可以在输入框中输入内容，点击按钮后会生成对应的二维码图像。

阅读全文