前端：艺术二维码生成过程canvas+html2canvas.js+qrcode.js

最新推荐文章于 2023-06-14 08:15:30 发布
置顶 最新推荐文章于 2023-06-14 08:15:30 发布
阅读量3.4k 收藏 7
点赞数 6
分类专栏： javascript 心得 工具 文章标签： 二维码 html2canvas js二维码 艺术二维码 qrcode.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lemisi/article/details/88831289
版权
javascript 同时被 3 个专栏收录
29 篇文章 0 订阅
订阅专栏
心得
21 篇文章 0 订阅
订阅专栏
工具
6 篇文章 0 订阅
订阅专栏

生成艺术二维码的体验地址：:http://yating.online/demo/qr/

喜欢的话，给个星吧~https://github.com/Chenyating/ART-QR-Code

体验图片：

 

存在问题：

1、目前仅适用于pc端；

2、内容过于复杂，可能无法识别出来；

3、有的二维码，用手机可以扫描出来，但是无法图片识别；

 

现在讲一下大概开发的过程：

用的数组比较多；主要都是用来记录小黑块；

array记录小黑的行列上色；

依次类推；

1、生成二维码，需要使用到QRCode.js：

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

基本的用法是：

var qrcode = new QRCode("test", {
    text: "www.yating.online",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

Github 地址：https://github.com/davidshimjs/qrcodejs

绘制二维码以后需要使用回调函数的方法：

 // html
  
  var qrcode = new QRCode(document.getElementById("qrcode"), {
     text: "www.yating.online",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
  },function(src){
    console.log(src)
    //回调方法
 });

因为最后导出的是以canvas的形式导出的二维码，很不方便我计算小黑快；

所以我在源码上面，改成最后以table的形式导出二维码，从而更方便计算小黑块的数目；

  1. 在源码中找到这个方法：Drawing.prototype.draw = function (oQRCode)
  2. 把里面的内容删掉替换成现有的导出table的方法，代码如下：
var _htOption = this._htOption;
			var _el = this._el;
			var nCount = oQRCode.getModuleCount();
			var nWidth = Math.floor(_htOption.width / nCount);
			var nHeight = Math.floor(_htOption.height / nCount);
			var aHTML = ['<table id="tableQR" style="border:0;border-collapse:collapse;">'];

			for (var row = 0; row < nCount; row++) {
				aHTML.push('<tr>');

				for (var col = 0; col < nCount; col++) {
					aHTML.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:' + nWidth + 'px;height:' + nHeight + 'px;background-color:' + (oQRCode.isDark(row, col) ? _htOption.colorDark : _htOption.colorLight) + ';"></td>');
				}

				aHTML.push('</tr>');
			}

			aHTML.push('</table>');
			_el.innerHTML = aHTML.join('');

			// Fix the margin values as real size.
			var elTable = _el.childNodes[0];
			var nLeftMarginTable = (_htOption.width - elTable.offsetWidth) / 2;
			var nTopMarginTable = (_htOption.height - elTable.offsetHeight) / 2;

			if (nLeftMarginTable > 0 && nTopMarginTable > 0) {
				elTable.style.margin = nTopMarginTable + "px " + nLeftMarginTable + "px";
			}
			this._bIsPainted = true;

 

2、计算二维码的小黑快；

通过得到tr的行数，我们就可以知道这个二维码是一个n*n的正方形；

然后在每个小方块的位置，记录在一个数组里。并且记录好该方块是否上色；

主要是接下来给二维码绘制图案起作用；

在最一开始的时候，我要先把3个码眼给保存下来，以后就不在对码眼区域的小黑块做统计了

  //    首先把3个大框框保存下来；
                    if ((i < 7 && j < 7) || (i > this.arrayLength - 8 && j < 8) || (i < 8 && j > this.arrayLength - 8)) {
                        this.array[i][j][1] = 1;
                    }

array[i][j][0]=1:表示第i行j列的小方块是黑色的；

array[i][j][1]=1：表示第i行j列的小方块待会不做记录处理；

以此类推：

countWidth() {
            var tr = $("#tableQR tbody").find("tr");
            // 获取二维码一行的数量，从而得知是n*n个；设置一个n行n列的数组
            this.arrayLength = tr.length;
            // 开始遍历表格,把每一个td的上色情况存在array数组里；
            this.array = [];
            for (let i = 0; i < tr.length; i++) {
                this.array[i] = [];
                // 首先遍历tr数组
                // console.log("第", i, "行")
                for (let j = 0; j < tr[i].children.length; j++) {
                    this.array[i][j] = []; //第一个是上色情况，第二个是记录情况
                    // 遍历每个tr里的td，记录每个td的上色情况；
                    if (tr[i].children[j].style.backgroundColor == 'black') {
                        this.array[i][j][0] = 1;
                        this.array[i][j][1] = 0;
                        // this.array[i][j]= 1;
                    } else {
                        this.array[i][j][0] = 0;
                        this.array[i][j][1] = 1;
                        // this.array[i][j] = 0;
                    }
                    //    首先把3个大框框保存下来；
                    if ((i < 7 && j < 7) || (i > this.arrayLength - 8 && j < 8) || (i < 8 && j > this.arrayLength - 8)) {
                        this.array[i][j][1] = 1;
                    }
                }
            }
        },

3、随机填充小黑块；

最主要的精髓就是，填充小黑块的正中心，大概1/9分布到所有小黑块上去，就可以识别了

众所周知，只要把有颜色的图案，替换掉小黑块就可以识别出来了。

所以。我给它设计了10种不同的填充方式：

他们分别对应的小黑块是这个样子的：

4、所以我们就要开始随机的去计算这10种可能的图案能把所有小黑快填满的数据；

每次生成的组成都是不一样的图案，给大家看一下例子；我把第一张图叫正7图案，因为看起来像7；第二张图叫反7；

 // 统计方块反7正7的个数
        count7() {
            var positive7 = 0;
            this.arrayPositive7 = [];
            var reverse7 = 0;
            this.arrayRever7 = [];
            for (let i = 0; i < this.arrayLength - 2; i++) {
                //   遍历每一个数组里的值
                for (let j = 0; j < this.arrayLength - 2; j++) {
                    // 如果这个小方块没有上色或者这个小方块被记录过了，那么我们就不用管它了！
                    if (this.array[i][j][1] == 1) {
                        continue;
                    } else {
                        // 随机记录正反7
                        if (parseInt(Math.random() * 2) == 1) {
                            // 判断是否超出；
                            // 否则判断他是否是正7。
                            if (this.array[i][j][0] == 1 &&
                                this.array[i][j][1] == 0 &&
                                this.array[i + 1][j][0] == 0 &&
                                this.array[i][j + 1][0] == 1 &&
                                this.array[i][j + 1][1] == 0 &&
                                this.array[i + 1][j + 1][0] == 1 &&
                                this.array[i + 1][j + 1][1] == 0) {
                                // 现在positive7已经被记录了；
                                this.array[i][j][1] = 1
                                this.array[i][j + 1][1] = 1
                                this.array[i + 1][j + 1][1] = 1
                                // 把竖7的i，j记录进去；
                                // 开始收收集7行的小方块数据；
                                this.arrayPositive7[positive7] = [];
                                this.arrayPositive7[positive7][0] = j;
                                this.arrayPositive7[positive7][1] = i
                                positive7 = positive7 + 1;
                            } else {
                                continue;
                            }
                        } else {
                            // 反7
                            if (this.array[i][j][0] == 1 &&
                                this.array[i][j][1] == 0 &&
                                this.array[i + 1][j + 1][0] == 0 &&
                                this.array[i][j + 1][0] == 1 &&
                                this.array[i][j + 1][1] == 0 &&
                                this.array[i + 1][j][0] == 1 &&
                                this.array[i + 1][j][1] == 0) {
                                // 现在positive7已经被记录了；
                                this.array[i][j][1] = 1
                                this.array[i][j + 1][1] = 1
                                this.array[i + 1][j][1] = 1
                                // 把竖7的i，j记录进去；
                                // 开始收收集7行的小方块数据；
                                this.arrayRever7[reverse7] = [];
                                this.arrayRever7[reverse7][0] = j;
                                this.arrayRever7[reverse7][1] = i
                                reverse7 = reverse7 + 1;
                            } else {
                                continue;
                            }
                            // 开始收收集7行的小方块数据；
                            // 否则判断他是否是横7。
                        }
                    }
                }
            }
            // console.log(this.arrayPositive7);
            // console.log(this.arrayRever7);
            this.pain(this.arrayRever7, 2, 2, 7, "re")
            this.pain(this.arrayPositive7, 2, 2, 7, "po")
        },

统计田的方法：

  // 统计田
        countTian() {
            var tian = 0;
            this.arrayTian = [];
            for (let i = 0; i < this.arrayLength - 2; i++) {
                //   遍历每一个数组里的值
                for (let j = 0; j < this.arrayLength - 2; j++) {
                    // 如果这个小方块没有上色或者这个小方块被记录过了，那么我们就不用管它了！
                    if (this.array[i][j][1] == 1) {
                        continue;
                    } else {
                        if (
                            this.array[i][j][0] == 1 &&
                            this.array[i][j][1] == 0 &&
                            this.array[i + 1][j][0] == 1 &&
                            this.array[i + 1][j][1] == 0 &&
                            this.array[i][j + 1][0] == 1 &&
                            this.array[i][j + 1][1] == 0 &&
                            this.array[i + 1][j + 1][0] == 1 &&
                            this.array[i + 1][j + 1][1] == 0) {
                            // 现在positive7已经被记录了；
                            this.array[i][j][1] = 1
                            this.array[i + 1][j][1] = 1
                            this.array[i][j + 1][1] = 1
                            this.array[i + 1][j + 1][1] = 1
                            // 把竖7的i，j记录进去；
                            // 开始收收集7行的小方块数据；
                            this.arrayTian[tian] = [];
                            this.arrayTian[tian][0] = j;
                            this.arrayTian[tian][1] = i
                            tian = tian + 1;
                        } else {
                            continue;
                        }
                    }
                }
            }
            this.pain(this.arrayTian, 2, 2, 22, "tian");
        },

因为统计：4、3、2个方块的横竖方法类似，所以我把她们合并成一个方法来分别调用：

       / *返回判断条件；当数量为4、3、2个方块的；
         * 类型有：col和row；
         * i,j此时遍历的条件；
         */
        countType(arrayType, num) {
            var col = 0;
            this[arrayType].col = [];
            var row = 0;
            this[arrayType].row = [];
            for (let i = 0; i < this.arrayLength; i++) {
                //   遍历每一个数组里的值
                for (let j = 0; j < this.arrayLength; j++) {
                    // 如果这个小方块没有上色或者这个小方块被记录过了，那么我们就不用管它了！
                    if (this.array[i][j][1] == 1) {
                        continue;
                    } else {
                        // 随机记录行竖4
                        if (parseInt(Math.random() * 2) == 1) {
                            // 判断是否超出；
                            if (i >= this.arrayLength - num) {
                                continue;
                            } else {
                                // 否则判断他是否是竖4。
                                if (this.condition(num, "col", i, j)) {
                                    // 现在col4已经被记录了；
                                    for (k = 0; k < num; k++) {
                                        this.array[i + k][j][1] = 1
                                    }
                                    // 把竖4的i，j记录进去；
                                    // 开始收收集4行的小方块数据；
                                    this[arrayType].col[col] = [];
                                    this[arrayType].col[col][0] = j;
                                    this[arrayType].col[col][1] = i
                                    col = col + 1;
                                } else {
                                    continue;
                                }
                            }
                        } else {
                            if (j >= this.arrayLength - num) {
                                continue;
                            } else {

                                if (this.condition(num, "row", i, j)) {
                                    // 现在row4已经被记录了；
                                    for (k = 0; k < num; k++) {
                                        this.array[i][j + k][1] = 1
                                    }
                                    // 把横4的i，j记录进去；
                                    this[arrayType].row[row] = [];
                                    this[arrayType].row[row][0] = j;
                                    this[arrayType].row[row][1] = i
                                    row = row + 1;
                                } else {
                                    continue;
                                }
                            }
                        }
                    }
                }
            }
            this.pain(this[arrayType].row, num, 1, num, "row");
            this.pain(this[arrayType].col, 1, num, num, "col");
        },

if（condition（））会返回判断该类型图片的条件

     /*
         * 返回判断条件；当数量为4、3、2个方块的；
         * 类型有：col和row；
         * i,j此时遍历的条件；
         */
        condition(num, type, i, j) {
            if (num == 4 && type == "row") {
                return (this.array[i][j][0] == 1 &&
                    this.array[i][j][1] == 0 &&
                    this.array[i][j + 1][0] == 1 &&
                    this.array[i][j + 1][1] == 0 &&
                    this.array[i][j + 2][0] == 1 &&
                    this.array[i][j + 2][1] == 0 &&
                    this.array[i][j + 3][0] == 1 &&
                    this.array[i][j + 3][1] == 0)
            }
            if (num == 4 && type == "col") {
                return (this.array[i][j][0] == 1 &&
                    this.array[i][j][1] == 0 &&
                    this.array[i + 1][j][0] == 1 &&
                    this.array[i + 1][j][1] == 0 &&
                    this.array[i + 2][j][0] == 1 &&
                    this.array[i + 2][j][1] == 0 &&
                    this.array[i + 3][j][0] == 1 &&
                    this.array[i + 3][j][1] == 0)
            }
            if (num == 3 && type == "row") {
                return (this.array[i][j][0] == 1 &&
                    this.array[i][j][1] == 0 &&
                    this.array[i][j + 1][0] == 1 &&
                    this.array[i][j + 1][1] == 0 &&
                    this.array[i][j + 2][0] == 1 &&
                    this.array[i][j + 2][1] == 0)
            }
            if (num == 3 && type == "col") {
                return (this.array[i][j][0] == 1 &&
                    this.array[i][j][1] == 0 &&
                    this.array[i + 1][j][0] == 1 &&
                    this.array[i + 1][j][1] == 0 &&
                    this.array[i + 2][j][0] == 1 &&
                    this.array[i + 2][j][1] == 0)
            }
            if (num == 2 && type == "row") {
                return (this.array[i][j][0] == 1 &&
                    this.array[i][j][1] == 0 &&
                    this.array[i][j + 1][0] == 1 &&
                    this.array[i][j + 1][1] == 0)
            }
            if (num == 2 && type == "col") {
                return (this.array[i][j][0] == 1 &&
                    this.array[i][j][1] == 0 &&
                    this.array[i + 1][j][0] == 1 &&
                    this.array[i + 1][j][1] == 0)
            }
        },

最后没有填满的小黑块都均以1个小黑块来记录下来：

  // 统计剩余1单个方块
        count1() {
            var col1 = 0;
            this.array1 = [];
            for (let i = 0; i < this.arrayLength; i++) {
                //   遍历每一个数组里的值
                for (let j = 0; j < this.arrayLength; j++) {
                    // 如果这个小方块没有上色或者这个小方块被记录过了，那么我们就不用管它了！
                    if (this.array[i][j][1] == 1) {
                        continue;
                    } else {
                        this.array[i][j][1] = 1
                        // 剩下的按单个记录保存；
                        this.array1[col1] = [];
                        this.array1[col1][0] = j;
                        this.array1[col1][1] = i
                        col1 = col1 + 1;
                    }
                }
            }
            this.pain(this.array1, 1, 1, 1, "one");
        },

5、开始绘制图案

每次计算好不同类型的图案的方式，紧接着我就会开始绘制该图案到canvas上：

因为i行j列，对应x、y轴时；

i对应y；

j对应x；

所以渲染的时候要注意一下以免搞混杂了。

   // 绘制艺术二维码
        pain(arrayName, width, height, num, type) {
            var img = new Image();
            img.src = this.imgSrc(num, type);
            //浏览器加载图片完毕后再绘制图片
            img.onload = () => {
                //以Canvas画布上的坐标(10,10)为起始点，绘制图像 //图像的宽度和高度分别缩放到350px和100px
                if (arrayName.length != 0) {
                    for (let i = 0; i < arrayName.length; i++) {
                        this.canvasBg.drawImage(img, arrayName[i][0] * this.unit, arrayName[i][1] * this.unit, width * this.unit, height * this.unit);
                    }
                } else {
                    return;
                }
            };
        },

this.imgSrc（num，type）会根据不同的图案类型返回图片路径

    // 返回图片src
        imgSrc(num, type) {
            if (num == 4 && type == "row") {
                return "../img/qr/row4.png";
            }
            if (num == 4 && type == "col") {
                return "../img/qr/col4.png";
            }
            if (num == 3 && type == "row") {
                return "../img/qr/row3.png";
            }
            if (num == 3 && type == "col") {
                return "../img/qr/col3.png";
            }
            if (num == 7 && type == "re") {
                return "../img/qr/re7.png";
            }
            if (num == 7 && type == "po") {
                return "../img/qr/po7.png";
            }
            if (num == 22 && type == "tian") {
                return "../img/qr/tian.png";
            }
            if (num == 2 && type == "row") {
                return "../img/qr/row2.png";
            }
            if (num == 2 && type == "col") {
                return "../img/qr/col2.png";
            }
            if (num == 1 && type == "one") {
                return "../img/qr/one.png";
            }
        },

6、绘制码眼

最后我们开始绘制定位的码眼：它的宽度是7个小方块；

====》

    // 绘制艺术二维码
        painEye() {
            var img = new Image();
            img.src = "../img/qr/eye.png";
            //浏览器加载图片完毕后再绘制图片
            img.onload = () => {
                this.canvasBg.drawImage(img, 0 * this.unit, 0 * this.unit, 7 * this.unit, 7 * this.unit);
                this.canvasBg.drawImage(img, (this.arrayLength - 7) * this.unit, 0 * this.unit, 7 * this.unit, 7 * this.unit);
                this.canvasBg.drawImage(img, 0 * this.unit, (this.arrayLength - 7) * this.unit, 7 * this.unit, 7 * this.unit);
            };
        },

基本上到最后你就能生成一个这样的二维码了：

然后我们再给它导出图片格式；就万事大吉了。

 

拓展：

1、因为我还会加上一个背景，但是我的背景是img标签；如果你想要div截图成img输出；

可以使用html2canvas：http://html2canvas.hertzen.com/

html：

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

js：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

解决html标签导出img不清晰的问题：

      toBeCanvas() {
            var copyDom = $("#canvasQR");
            var width = copyDom.offsetWidth; //dom宽
            var height = copyDom.offsetHeight; //dom高
            var scale = 2; //放大倍数
            html2canvas(this.$refs['order'], {
                dpi: window.devicePixelRatio * 2,
                scale: scale,
                width: width,
                heigth: height,
            }).then(canvas => {
                const context = canvas.getContext('2d');
                // 【重要】关闭抗锯齿 https://segmentfault.com/a/1190000011478657
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                var url = canvas.toDataURL();
                var triggerDownload = $("<a>").attr("href", url).attr("download", "详情.png").appendTo("body");
                triggerDownload[0].click();
                triggerDownload.remove();
            });
        },

这四行是关键：

                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;

2、img绘制到canvas不清晰的解决方法：

<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>

canvas的内容放大到两倍，以img的形式展示1倍；

绘制到canvas的图片绝对清晰；

明月别枝
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QRCanvas：手绘二维码的艺术与实用主义结合
gitblog_00047的博客
04-27 396
QRCanvas：手绘二维码的艺术与实用主义结合 项目地址:https://gitcode.com/gera2ld/qrcanvas 在数字世界里，二维码已经成为了连接实体和虚拟世界的桥梁。而QRCanvas是一个创新项目，它不仅让你能够生成普通的二维码，还能将二维码变成一幅可定制的艺术作品。 项目简介 QRCanvas 是一个基于 Python 的库，允许开发者和设计者自定义二维码的样式，将其转...
qartjs生成艺术二维码
08-10
Generate artistic QR code. qart.js生成艺术二维码
qrcodejs2生成二维码，通过canvas绘制带边框+中间logo的二维码图片，下载二维码
qq_44869043的博客
06-09 7229
view.vue 文件，scss 样式部分，设计要求二维码要有圆角边框。中,再绘制canvas之前先扩展绘制圆角矩形的方法。上面文章详细讲解了坐标的计算，有兴趣的可以前去查看。view.vue 文件，javascript 部分。1、通过canvas去绘制 边框+二维码+logo。在 view.vue 文件中，HTML部分。2、通过a.download 去下载图片。粗略代码，部分代码省略。
夜间模式qrcodejs2生成二维码设置白色边框（深色模式）
weixin_45594156的博客
04-26 1423
夜间模式qrcodejs2生成二维码设置白色边框（深色模式），找了好多qrcodejs2设置边框的方法都只适用于亮色情况下，一旦app浏览器自定义的深色模式，黑色二维码跟黑色背景融为一体无法识别。二维码边框设置
vue 生成 二维码 qrCode 插件 使用 方法
baao7274的博客
05-30 254
首先安装方法：（--save 参数会改变package.json 推荐使用 下次直接install就行了） npm install --save qrcode 然后项目使用： import QRCode from 'qrcode' 然后使用方法： html 使用 - <!-- index.html --> <...
使用 JavaScript 生成二维码 —— QRCode.js
qq_43414012的博客
04-22 780
最近在修改同时代码的时候发现了一个根据JavaScript生成二维码的语法：QRCode.js，和之前接触的不太一样，于是记录一下。 什么是 QRCode.js？ QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。 基本用法 <div id="qrcode">...
这就是艺术，优雅的二维码生成器「GitHub 热点速览」
HelloGitHub 的博客
06-14 448
作者：HelloGitHub-小鱼干平时如果没有需要一般那团黑乎乎的二维码，估计路过的人看见第一眼就不会再看第二眼。但是假若，它是个帅哥靓妹，估计就不同了，更别提像是艺术画一样，将编码图案融入到画里的二维码生成器 qrbtf 作者的新作，怎一个美字了得。二维码尚且可以如此优雅，英特尔怎么能甘于人后呢？本周它并开源了一款对眼睛友好的字体，intel-one-mono 阅读起来没压力。此外，还有之前抠...
Vue海报二维码组合图片生成和下载-qrcodejs2-html2canvas
05-08
vue-qrcode-html2canvas 生成海报带二维码-可保存图片 本项目是使用 qrcodejs2 生成二维码图片 然后使用 html2canvas 将生成的二维码图片和html文本结构合成为base64图片数据 让后展示下载分享 本项目核心代码在 ...
qrcodejs2+html2canvas 生成二维码和海报
11-03
代码放到线上使用，本地生成海报图片显示不了，必须...qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报
JavaScript基于qrcode.js带Logo彩色二维码(彩色艺术二维码)
03-24
首先，qrcode.js是由Davidshimjs开发的一个轻量级的JavaScript库，它允许开发者在浏览器环境中生成二维码。这个库简单易用，只需几行代码就能实现二维码的生成。在创建彩色或艺术二维码时，qrcode.js提供了自定义...
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
10-20
JavaScript生成二维码是Web开发中一个常见的需求，尤其在移动应用和网页中，二维码常用于分享链接、信息交换等。在JavaScript中，我们可以借助第三方库来实现这个功能，比如`jquery.qrcode.js`。然而，原版的`jquery...
ArtQRCode：艺术二维码生成工具（Art QRcode生产力工具）
02-06
ArtQRCode是基于qrcode.js的封装，支持以图片元素为基本单元的二维码放置。 基本用法 < div xss=removed> < / div > < script > var options = { text : "https://github.com/252860883/ArtQRCode" , width : 500 , height : 500 , codeWidth : 320 , codeHeight : 320 , top : 85 , left
QRCode.js：使用js快速生成二维码
01-08
QRCode.js是用于生成qrcode(二维码)的javascript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js不依赖任何其他库。 首先需要下载QRCode文件 下载地址 ...
二维码的原理和制作
于小猿的博客
07-25 4691
什么是二维码 1、二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能够存更多的信息，也能表示更多的数据类型。 2、二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图像输入设备
在vue中使用QRCode和html2canvas生成海报以及二维码
lll19960406的博客
08-16 257
在vue项目中，有时候会用到生成海报，扫描二维码的功能，大部分都是用到canvas,在vue中有现成的依赖可用，即需要QRCode、html2canvas等，以下是一个小案例的真实使用过程，若有不足，欢迎指正。 在vue中使用QRCode生成二维码：以下是生成二维码的代码片段 1 <div class="code"> 2 <img :src="img...
vue2.0实现引用qrcode.js实现获取改变二维码的样式
热门推荐
iceking66的博客
09-30 3万+
vue代码 template> div class="qart"> div id="qrcode" ref="qrcode"> div> input type="text" id="getval" value="" placeholder="修改这个值改变二维码"> div> template> script> ex
js 生成二维码（qrcodejs）
xu_yi_hang的博客
03-17 1万+
前言 最近根据自己的需求寻找到了一款简单易用的生成二维码插件，特此分享 一、使用步骤 1.下载插件 npm i qrcodejs2 或 yarn add qrcodejs2 二、vue 中使用 1. vue 2 <template> <div> <div ref="qrcodeDom"></div> <button @click="show">展示二维码</button> <bu.
qrcode.js实现二维码生成---带边框解决方案
ren814的博客
12-13 1万+
以下为解决方案， 具体实现方式： 方案一： 因为在网上找了很久，没有找到可以直接在qrcode.js中实现的方法，找到一个，结果是CSDN要下载的，没办法，然后就想其他办法实现，利用俩个div的嵌套，在parent中设置白色背景，在child中放置qrcode，实现伪边框。 另外，我的parent和child因为还有其他的div的嵌套，未尝试，直接做是否可以，有需求的可以找其他的模板。这里只...
怎么用qrcode.js库实现二维码的生成
最新发布
09-26
### 回答1： 使用qrcode.js库可以轻松实现二维码的生成，所需的步骤如下：1. 安装qrcode.js库，可以使用NPM或者yarn进行安装；2. 创建一个HTML文件，在里面引入qrcode.js库；3. 使用qrcode.js库提供的API，创建一个新的QR码对象；4. 使用QR码对象生成一个新的二维码。 ### 回答2： qrcode.js是一个用于生成二维码的JavaScript库，可以通过以下步骤来实现二维码的生成： 1. 引入qrcode.js库：从qrcode.js的官方网站下载最新版本的库文件，然后在HTML文件中使用`<script>`标签将其引入。 2. 创建一个canvas元素：使用HTML的`<canvas>`标签创建一个用于显示二维码的画布。 3. 实例化qrcode对象：在JavaScript中，使用`new QRCode()`来实例化一个qrcode对象。 4. 设置二维码的参数：使用qrcode对象的`makeCode()`方法来设置二维码的参数，如二维码的内容、大小、错误校验级别等。例如，`qrcode.makeCode("Hello, World!")`会生成一个包含"Hello, World!"内容的二维码。 5. 将二维码渲染到canvas中：使用qrcode对象的`toCanvas()`方法将生成的二维码渲染到之前创建的canvas元素中。例如，`qrcode.toCanvas(document.getElementById("canvas"))`会将二维码渲染到id为"canvas"的元素中。 6. 样式和交互：根据需要，可以使用CSS样式和JavaScript事件来对生成的二维码进行美化和交互操作。例如，可以设置canvas元素的宽高和边框样式，也可以为二维码添加点击事件等。 7. 最后，将HTML文件在浏览器中打开，即可看到生成的二维码。 总结：使用qrcode.js库可以轻松实现二维码的生成。只需引入库文件，创建canvas元素，实例化qrcode对象并设置参数，然后将二维码渲染到canvas中即可。通过样式和交互操作，可以对生成的二维码进行个性化处理。 ### 回答3： qrcode.js是一个用于生成二维码的JavaScript库。使用qrcode.js生成二维码需要以下步骤： 1. 在HTML文件中引入qrcode.js库。可以使用CDN链接或者本地文件路径引入。 2. 创建一个canvas元素来呈现二维码。可以在HTML中定义一个canvas标签，也可以使用JavaScript动态创建一个canvas元素。 3. 使用JavaScript代码初始化qrcode.js库，并设置一些配置选项。比如，选择要显示的二维码版本，纠错级别，和尺寸。 4. 调用qrcode.js库的makeCode方法，将要生成的文本或URL作为参数传入。这个方法会在canvas元素中生成二维码图像。 5. 按需求对二维码进行自定义样式的修改，比如修改颜色、添加logo等。 6. 最后，将生成的二维码展示给用户。 下面是一个简单的示例代码： ``` <!DOCTYPE html> <html> <head> <title>生成二维码</title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> </head> <body> <canvas id="qrcodeCanvas"></canvas> <script> // 创建canvas元素 var canvas = document.getElementById("qrcodeCanvas"); // 设置qrcode.js的配置选项 var options = { text: "https://www.example.com", // 要生成二维码的文本或URL width: 256, // 二维码宽度 height: 256 // 二维码高度 }; // 初始化qrcode.js库 var qrcode = new QRCode(canvas, options); </script> </body> </html> ``` 通过上述步骤，您就可以使用qrcode.js库来生成二维码了。根据需要，您还可以通过修改配置选项、自定义样式等进行额外的定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值