用HTML+JS制作二维码生成器

最新推荐文章于 2024-08-13 21:31:15 发布

宾盛官方

最新推荐文章于 2024-08-13 21:31:15 发布

阅读量930

点赞数

CC 4.0 BY-SA版权

文章标签： html5 华为 chatgpt gpu算力 javascript

本文链接：https://blog.youkuaiyun.com/emptyset/article/details/133048465

本文介绍如何使用HTML和JavaScript实现一个简单的二维码生成器。代码中包含了一个HTML页面，它包含一个文本输入框，一个生成按钮，以及一个用于显示二维码的canvas元素。JavaScript部分使用了QRious库来生成二维码，当用户点击生成按钮时，会将输入框中的文本转换为二维码并显示在canvas上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二维码生成</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}

h1 {
margin-top: 30px;
}

input {
width: 300px;
height: 30px;
font-size: 16px;
padding: 5px;
margin-top: 20px;
}

button {
width: 120px;
height: 40px;
font-size: 18px;
margin-top: 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

canvas {
margin-top: 20px;
}
</style>
<script src="looknow.js"></script>
</head>
<body>
<h1>闪光二维码</h1>
<input type="text" id="text-input" placeholder="输入要生成二维码的文本">
<br><br>
<button onclick="generateQRCode()">生成二维码</button>
<br><br>
<canvas id="qrcode"></canvas>

looknow.js

/*! QRious v4.0.2 | (C) 2017 Alasdair Mercer | GPL v3 License
Based on jsqrencode | (C) 2010 tz@execpc.com | GPL v3 License
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.QRious=e()}(this,function(){"use strict";function t(t,e){var n;return"function"==typeof Object.create?n=Object.create(t):(s.prototype=t,n=new s,s.prototype=null),e&&i(!0,n,e),n}function e(e,n,s,r){var o=this;return"string"!=typeof e&&(r=s,s=n,n=e,e=null),"function"!=typeof n&&(r=s,s=n,n=function(){return o.apply(this,arguments)}),i(!1,n,o,r),n.prototype=t(o.prototype,s),n.prototype.constructor=n,n.class_=e||o.class_,n.super_=o,n}function i(t,e,i){for(var n,s,a=0,h=(i=o.call(arguments,2)).length;a<h;a++){s=i[a];for(n in s)t&&!r.call(s,n)||(e[n]=s[n])}}function n(){}var s=function(){},r=Object.prototype.hasOwnProperty,o=Array.prototype.slice,a=e;n.class_="Nevis",n.super_=Object,n.extend=a;var h=n,f=h.extend(function(t,e,i){this.qrious=t,this.element=e,this.element.qrious=t,this.enabled=Boolean(i)},{draw:function(t){},getElement:function(){return this.enabled||(this.enabled=!0,this.render()),this.element},getModuleSize:function(t){var e=this.qrious,i=e.padding||0,n=Math.floor((e.size-2*i)/t.width);return Math.max(1,n)},getOffset:function(t){var e=this.qrious,i=e.padding;if(null!=i)return i;var n=this.getModuleSize(t),s=Math.floor((e.size-n*t.width)/2);return Math.max(0,s)},render:function(t){this.enabled&&(this.resize(),this.reset(),this.draw(t))},reset:function(){},resize:function(){}}),c=f.extend({draw:function(t){var e,i,n=this.qrious,s=this.getModuleSize(t),r=this.getOffset(t),o=this.element.getContext("2d");for(o.fillStyle=n.foreground,o.globalAlpha=n.foregroundAlpha,e=0;e<t.width;e++)for(i=0;i<t.width;i++)t.buffer