qrCode生成二维码内容

最新推荐文章于 2025-03-27 12:46:55 发布

原创

最新推荐文章于 2025-03-27 12:46:55 发布

· 9.8k 阅读

0 ·

版权

文章标签：

#前端

本文介绍了如何在前端实现二维码的生成与扫描内容的展示，包括创建二维码页面、展示扫描内容以及引用的JavaScript库的使用。

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

1、二维码页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码页面</title>
    <script src="qrcode.min.js"></script>
</head>
<body>
<div id="qrCode"></div>
</body>
<script>
        var testQrCode = new QRCode("qrCode", {
   
            text: "content.html",   // 二维码扫描内容页面
            width: 128,
            height: 128,
            colorDark : "#000000",  // 码的颜色
            colorLight : "#ffffff",  // 码的背景色
            correctLevel : QRCode.CorrectLevel.H  // 高度容错
        });
    // }
</script>
</html>

2、二维码扫描出的内容写在content.html里面,比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容</title>
</head>
<body>
<div>扫描出的内容</div>
</body>
</html>

3、引入的js文件

var QRCode;!function(){
   function a(a){
   this.mode=c.MODE_8BIT_BYTE,this.data=a,this.parsedData=[];for(var b=[],d=0,e=this.data.length;e>d;d++){
   var f=this.data.charCodeAt(d);f>65536?(b[0]=240|(1835008&f)>>>18,b[1]=128|(258048&f)>>>12,b[2]=128|(4032&f)>>>6,b[3]=128|63&f):f>2048?(b[0]=224|(61440&f)>>>12,b[1]=128|(4032&f)>>>6,b[2]=128|63&f):f>128?(b[0]=192|(1984&f)>>>6,b[1]=128|63&f):b[0]=f,this.parsedData=this.parsedData.concat(b)}this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function b(a,b){
   this.typeNumber=a,this.errorCorrectLevel=b,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}function i(a,b){
   if(void 0==a.length)throw new Error(a.length+"/"+b);for(var c=0;c<a.length&&0==a[c];)c++;this.num=new Array(a.length-c+b);for(var d=0;d<a.length-c;d++)this.num[d]=a[d+c]}function j(a,b){
   this.totalCount=a,this.dataCount=b}function k(){
   this.buffer=[],this.length=0}function m(){
   return"undefined"!=typeof CanvasRenderingContext2D}function n(){
   var a=!1,b=navigator.userAgent;return/android/i.test(b)&&(a=!0,aMat=b.toString().match(/android ([0-9]\.[0-9])/i),aMat&&aMat[1]&&(a=parseFloat(aMat[1]))),a}function r(a,b){
   for(var c=1,e=s(a),f=0,g=l.length;g>=f;f++){
   var h=0;switch(b){
   case d.L:h=l[f][0];break;case d.M:h=l[f][1];break;case d.Q:h=l[f][2];break;case d.H:h=l[f][3]}if(h>=e)break;c++}if(c>l.length)throw new Error("Too long data");return c}function s(a){
   var b=encodeURI(a).toString().replace(/\%[0-9a-fA-F]{
   2}/g,"a");return b.length+(b.length!=a?3:0)}a.prototype={
   getLength:function(){
   return this.parsedData.length},write:function(a){
   for(var b=0,c=this.parsedData.length;c>b;b++)a.put(this.parsedData[b],8)}},b.prototype={
   addData:function(b){
   var c=new a(b);this.dataList.push(c),this.dataCache=null},isDark:function(a,b){
   if(0>a||this.moduleCount<=a||0>b||this.moduleCount<=b)throw new Error(a+","+b);return this.modules[a][b]},getModuleCount:function(){
   return this.moduleCount},make:function(){
   this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){
   this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var d=0;d<this.moduleCount;d++){
   this.modules[d]=new Array(this.moduleCount);for(var e=0;e<this.moduleCount;e++)this.modules[d][e]=null}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(a,c),this.typeNumber>=7&&this.setupTypeNumber(a),null==this.dataCache&&(this.dataCache=b.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,b){
   for(var c=-1;7>=c;c++)if(!(-1>=a+c||this.moduleCount<=a+c))for(var d=-1;7>=d;d++)-1>=b+d||this.moduleCount<=b+d||(this.modules[a+c][b+d]=c>=0&&6>=c&&(0==d||6==d)||d>=0&&6>=d&&(0==c||6==c)||c>=2&&4>=c&&d>=2&&4>=d?!0:!1)},getBestMaskPattern:function(){
   for(var a=0,b=0,c=0;8>c;c++){
   this.makeImpl(!0,c);var d=f.getLostPoint(this);(0==c||a>d)&&(a=d,b=c)}return b},createMovieClip:function(a,b,c){
   var d=a.createEmptyMovieClip(b,c),e=1;this.make();for(v

最低0.47元/天解锁文章