qrcode.js使用js生成二维码（并下载）的实践

知识点

base64数据形式

Base64是一种用64个字符来表示任意二进制数据的方法。 – 廖雪峰官方网站

Base64编码有哪些情景需求？ – 知乎

案例场景

后台生成邀请链接，前端拿到链接之后处理成二维码图片并下载到本地，用于转发。

qrcode.js及jquery-qrcode.js实现生成二维码

qrcode.js github地址： qrcode
jquery-qrcode.js github地址： jquery-qrcode

1.html 代码

  <div id="qrcode"></div><!-- 用于生成二维码的容器 -->

2.js 代码

  // qrcode.jsvar qrcode = new QRCode(document.getElementById("qrcode"), {text: "i am the first qrcode",width: 128, //生成的二维码的宽度height: 128, //生成的二维码的高度colorDark : "#000000", // 生成的二维码的深色部分colorLight : "#ffffff", //生成二维码的浅色部分correctLevel : QRCode.CorrectLevel.H});//jquery-qrcode.jsvar qrcode = $('#qrcode').qrcode({width: 128,height: 128,text: "size doesn't matter"});

3.qrcode.js 与jquery-qrcode.js区别

qrcode.js可以指定生成的二维码深色、浅色区域块的颜色，jquery-qrcode.js只能默认黑白两色
qrcode.js支持clear()和makeCode()方法，用于便捷清空二维码、更换二维码，jquery-qrcode.js不支持

4.qrcode.js生成二维码原理

qrcode.js在用于生成二维码的容器#qrcode内生成一个canvas标签和一个img标签，并且以base64的编码格式描述图片信息。

点击按钮，生成的二维码图片保存到本地

实现原理

将base64编码格式的图片转换成canvas画布
利用toDataUrl()方法将canvas画布信息转化为可供下载的url信息 toDataUrl()
构建下载链接并模拟点击，将图片下载到本机

基于qrcode.js案例demo实现将生成的二维码保存为本地图片

构建一个用于下载的空的a标签

  <a id="downloadLink"></a><button type="button" onclick="downloadClick()">下载</button>

将base64图片构建成画布并模拟点击a标签下载

  //jsfunction downloadClick () {// 获取base64的图片节点var img = document.getElementById('qrcode').getElementsByTagName('img')[0];// 构建画布var canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;canvas.getContext('2d').drawImage(img, 0, 0);// 构造urlurl = canvas.toDataURL('image/png');// 构造a标签并模拟点击var downloadLink = document.getElementById('downloadLink');downloadLink.setAttribute('href', url);downloadLink.setAttribute('download', '二维码.png');downloadLink.click();}//jqueryfunction downloadClick () {// 获取base64的图片节点var img = $('#qrcode img').[0];// 构建画布var canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;canvas.getContext('2d').drawImage(img, 0, 0);// 构造urlurl = canvas.toDataURL('image/png');// 构造a标签并模拟点击var downloadLink = $('#downloadLink').attr("href", url).attr("download", "二维码.png");downloadLink[0].click();}

qrcode.js使用js生成二维码（并下载）的实践相关推荐

用qrcode.js写的生成二维码和下载这个二维码
实在是不想用网上的生成二维码,就自己写了个简单的生成和下载的功能先看一下效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...
网页获取微信信息——js使用插件生成二维码（1）
js使用插件生成二维码: 一.安装依赖: npm i qrcodejs2 -S 二.放置二维码的容器,需要给一个ref <div class="QRcodeCon">& ...
vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴
近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接.列表每项都有二维码.下载二维码和复制链接和列表上方总的二维码. 老模块是用的qrocode中文文档,qrcode github ...
vue+qrcodejs2 动态生成二维码并下载
安装依赖 npm install --save qrcodejs2 vue页面引用 <script>import QRCode from 'qrcodejs2'import axios f ...
jquery二维码生成插件jquery.qrcode.js，生成二维码并下载
下载插件: 在GitHub上,下载qrcode二维码插件: https://github.com/jeromeetienne/jquery-qrcode Vue项目可直接通过node.js安装:npm ...
vue js前端根据所需参数生成二维码并下载
需要一个插件 qrcodejs2, 使用 npm install qrcodejs2 --save 下载该依赖包. 在vue中引入(我这边是vue2).import QRCode from 'qrco ...
百万前端之js通过链接生成二维码可以保存下载复制
在前端工作中,会遇到很多邀请好友的需求,这个时候就需要前端对需求进行实现了. 最终效果: 这个是做好以后的成品,根据链接生成二维码,提供保存二维码和复制链接功能,纯前端实现.话不多说直接上代码 htm ...
前端js html转换成pdf可下载打印；前端js可批量生成条形码；前端js可批量生成二维码，生成letter标签
注意:本文调试的是letter纸尺寸前端js html转换成pdf可下载打印 html2canvas + jspdf 前端js生成条形码 Options · lindell/JsBarcode ...
js 生成二维码并下载
1.先利用 qrcode 生成二维码引入qrcode.js ,地址为 qrcodejs-04f46c6.zip 点击打开链接页面: <button onclick="createQ ...
qrcode插件生成二维码并下载
很多情况下,我们需要实现点击按钮,下载二维码图片功能, 1.以下是页面代码 <!DOCTYPE html> <html lang="en"> <hea ...

qrcode.js使用js生成二维码（并下载）的实践

知识点

案例场景

qrcode.js及jquery-qrcode.js实现生成二维码

1.html 代码

2.js 代码

3.qrcode.js 与jquery-qrcode.js区别

4.qrcode.js生成二维码原理

点击按钮，生成的二维码图片保存到本地

实现原理

基于qrcode.js案例demo实现将生成的二维码保存为本地图片

qrcode.js使用js生成二维码（并下载）的实践相关推荐

最新文章

热门文章