js 生成二维码并下载

1.先利用 qrcode 生成二维码

引入qrcode.js ,地址为 qrcodejs-04f46c6.zip 点击打开链接

页面：

<button onclick="createQrcode()">点我生成网二维码</button>
<button onclick="downloadQrcode()">点我下载二维码</button>
<div id="qrcode"></div>

二维码生成函数：
function createQrcode(){var qrcode = new QRCode(document.getElementById("qrcode"), {text: "hahaha",  //你想要填写的文本width: 300, //生成的二维码的宽度height: 300, //生成的二维码的高度colorDark : "#000000", // 生成的二维码的深色部分colorLight : "#ffffff", //生成二维码的浅色部分correctLevel : QRCode.CorrectLevel.H});}

此时可以看到二维码已经在页面上展示了。

qrcode的方法：

makeCode(text) //设置内容
clear()   //清除内容。

2.下载二维码：

我们先看一下，生成二维码之后页面上的DOM元素展示。可以看到在id为qrcode的元素中多了俩个，一个是canvas元素，另外一个是img,就是我们生成的二维码图片。以base64的编码格式描述图片信息。

1）第一种：只需要获取到生成的img元素，并且填充到canvas中，在使用a标签的download 和href属性就可以实现下载了。

    function downloadQrcode(){var canvas = document.createElement("canvas");  //创建canvas元素var qrcode = document.getElementById('qrcode');var img = qrcode.getElementsByTagName('img')[0]; // 获取到图片元素。canvas.height = img.height;canvas.width = img.width;var ctx = canvas.getContext("2d");  //获取context对象ctx.drawImage(img,0,0);             //向画布上绘制图像var link = document.createElement("a"); var url = canvas.toDataURL("image/png"); // 将canvas中图片转化为base64码link.setAttribute("href",url);link.setAttribute("download",'123.png');link.click();}}

2）第二种：直接获取到img的src属性，填充到a标签的href即可，比较简单一些。

 function downloadQrcode(){var qrcode = document.getElementById('qrcode');var img = qrcode.getElementsByTagName('img')[0];var link = document.createElement("a");var url = img.getAttribute("src");link.setAttribute("href",url);link.setAttribute("download",'123.png');link.click();}

3.完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
</head>
<body>
<button onclick="createQrcode()">点我生成网二维码</button>
<button onclick="downloadQrcode()">点我下载二维码</button>
<div id="qrcode"></div>
</body>
</html>
<script>function createQrcode(){qrcode1 = new QRCode(document.getElementById("qrcode"), {text: "hahaha",width: 300, //生成的二维码的宽度height: 300, //生成的二维码的高度colorDark : "#000000", // 生成的二维码的深色部分colorLight : "#ffffff", //生成二维码的浅色部分correctLevel : QRCode.CorrectLevel.H});}function downloadQrcode(){var qrcode = document.getElementById('qrcode');var img = qrcode.getElementsByTagName('img')[0];var link = document.createElement("a");var url = img.getAttribute("src");link.setAttribute("href",url);link.setAttribute("download",'123.png');link.click();}
</script>

js 生成二维码并下载相关推荐

JS生成二维码以及点击下载二维码
JS生成二维码效果扫描二维码可访问指定链接或当前网站链接,内容可以自己更改 "复制链接",点击按钮复制当前网站链接如何获取当前网站链接源码 textarea{opacity ...
qrcode.js使用js生成二维码（并下载）的实践
知识点 base64数据形式 Base64是一种用64个字符来表示任意二进制数据的方法. – 廖雪峰官方网站 Base64编码有哪些情景需求? – 知乎案例场景后台生成邀请链接,前端拿到链接之后处 ...
vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴
近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接.列表每项都有二维码.下载二维码和复制链接和列表上方总的二维码. 老模块是用的qrocode中文文档,qrcode github ...
JS生成二维码(兼容各种浏览器及中文）
本文将介绍如何使用JS生成二维码,兼容各种浏览器及手机端,支持中文. 代码如下: <!DOCTYPE html> <html> <head> <meta ch ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
vue js前端根据所需参数生成二维码并下载
需要一个插件 qrcodejs2, 使用 npm install qrcodejs2 --save 下载该依赖包. 在vue中引入(我这边是vue2).import QRCode from 'qrco ...
qrcode.js 生成二维码包含logo和背景图片及IE下载二维码
思路: 1. 通过qrcode.js 生成带logo的二维码 2. 将背景图片.logo与生成的二维码图通过canvas 绘制在一起形成一个新的canvas 3. 将canvas 转成base64的u ...
jquery二维码生成插件jquery.qrcode.js，生成二维码并下载
下载插件: 在GitHub上,下载qrcode二维码插件: https://github.com/jeromeetienne/jquery-qrcode Vue项目可直接通过node.js安装:npm ...
js生成二维码，并将生成的二维码进行保存（手动下载）
生成二维码并保存为图片,点击下载此二维码简单实现的效果,如有更好的请指教利用jquery 加jquery.qrcode //外部的js<script src="./jquery/2 ...

js 生成二维码并下载

js 生成二维码并下载相关推荐

最新文章

热门文章