JavaScript实现链接转为二维码

(一)QRCode.js简介
使用方法
参数说明
(二)qrcode.js生成二维码原理
点击按钮，生成的二维码图片保存到本地
实现原理
基于qrcode.js案例demo实现将生成的二维码保存为本地图片

(一)QRCode.js简介

QRCode.js 是一个用于生成二维码图片的插件。github地址为https://github.com/davidshimjs/qrcodejs/

http://www.shouce.ren/study/api/s/7020

http://www.shouce.ren/study/api/s/7021

使用方法

(1)载入 JavaScript 文件

<script src="qrcode.js"></script>

(2)DOM 结构

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

(3)调用

// 简单方式 
new QRCode(document.getElementById('qrcode'), 'your content'); 
 
// 设置参数方式 
var qrcode = new QRCode('qrcode', { 
  text: 'your content', 
  width: 256, //生成的二维码的宽度
  height: 256, 
  colorDark : '#000000',  // 生成的二维码的深色部分
  colorLight : '#ffffff', //生成二维码的浅色部分
  correctLevel : QRCode.CorrectLevel.H 
}); 
 
// 使用 API 
qrcode.clear(); 
qrcode.makeCode('new content'); 

参数说明

    new QRCode(element, option)

http://www.shouce.ren/api/d/id/11159

(二)qrcode.js生成二维码原理

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

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

实现原理

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

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

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

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

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

//js
function 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);
	// 构造url
	url = canvas.toDataURL('image/png');
	// 构造a标签并模拟点击
	var downloadLink = document.getElementById('downloadLink');
	downloadLink.setAttribute('href', url);
	downloadLink.setAttribute('download', '二维码.png');
	downloadLink.click();
 }
//jquery
 function 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);
	// 构造url
	url = canvas.toDataURL('image/png');
	// 构造a标签并模拟点击
	var downloadLink = $('#downloadLink').attr("href", url).attr("download", "二维码.png");
	downloadLink[0].click();
}