前端使用QRcode生成二维码

在vue中需要生成二维码，这时候我们可以使用qrcode这个插件来完成

1. 首先需要安装插件

npm install --save qrcode

2. 引入使用

import QRCode from "qrcode"

3. 直接上代码

<img src="" alt="" id="images" /> //首先创建一个节点标签//然后生成二维码
具体怎么用，如何触发需要根据自身需求加事件触发var jsonArr = '这是二维码内容'; //在这里赋值二维码内容
//这里设置二维码类型颜色等
var opts = {errorCorrectionLevel: "H",type: "image/jpeg",quality: 0.3,margin: 1,color: {dark: "#000000",light: "#ffffff",},width: 300,};
//这一步就是生成二维码图片，然后赋值给上面的img标签
QRCode.toDataURL(jsonArr, opts, function (err, url) {if (err) throw err;var img = document.getElementById("images");img.src = url;});

下一篇我会整理一个点击下载二维码的教程，有需要的可以看一下

前端使用QRcode生成二维码相关推荐

js前端根据链接生成二维码并转成图片下载
js前端根据链接生成二维码并转成图片下载依赖于jquery.jquery.qrcode.min.js 1.html <div class="qrcode"></ ...
前端使用jr-qrcode生成二维码图片
前端使用jr-qrcode生成二维码图片安装引入使用结果安装 npm install jr-qrcode -S 引入 import jrQrcode from 'jr-qrcode'; 使用 ...
C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法
使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法参考文章: (1)使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法 (2)https: ...
关于QRCode生成二维码（背景图、Logo）
关于QRCode生成二维码的代码 /// <summary> /// 创建二维码 /// </summary> /// <param name="QRStrin ...
php使用Qrcode生成二维码
php使用Qrcode生成二维码首先检查php.ini Gd 库要打开 use QrCode; //控制器引用public function index(){include 'phpqrcode.p ...
用ThoughtWorks.QRCode生成二维码时出现“索引超出了数组界限”的错误
用ThoughtWorks.QRCode生成二维码时出现"索引超出了数组界限"的错误字符串较长的情况下,用ThoughtWorks.QRCode生成二维码时出现"索引超 ...
qrcode 生成二维码，带logo 带文字描述
qrcode 生成二维码 1.引入 pom.xml 2. ResourceRenderer 3. QRCodeUtil 4. QRCodeController 5. HTML 6. 测试 1.引入 p ...
C语言使用QRcode生成二维码
C语言使用QRcode生成二维码的简单操作首先需要QRcode源码包可以参考这位大神的文章: https://blog.csdn.net/qq_21475601/article/details/7 ...

前端使用QRcode生成二维码

前端使用QRcode生成二维码相关推荐

最新文章

热门文章