js生成canvas二维码，并提供下载二维码图片

        概要：js生成二维码，二维码是渲染在canvas中的，把canvas保存为<img>标签的图片在页面有一个按钮点击可以下载生成的二维码图片(所有操作都是在前端操作的)

        一 . js生成二维码

1、首先在页面中加入jquery库文件和qrcode插件。

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script> 下载地址：https://github.com/jeromeetienne/jquery-qrcode

2、在页面中需要显示二维码的地方加入以下代码：

<div id="code"></div> <!-- 提供一个div来存放生成的二维码 -->

3、调用qrcode插件。

方式一

qrcode支持canvas和table两种方式进行图片渲染，默认使用canvas方式，效率最高，当然要浏览器支持html5。直接调用如下：

  $('#code').qrcode("http://www.baodu.com"); //任意字符串

方式二 

$("#code").qrcode({
    render: "table", //table方式
    width: 200, //宽度
    height:200, //高度
    text: "hello Word" //任意内容
});

方式三  识别中文

jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码，如果有中文内容，在生成二维码前就要把字符串转换成UTF-8，然后再生成二维码。您可以通过以下函数来转换中文字符串：

function toUtf8(str) {   
	    var out, i, len, c;   
	    out = "";   
	    len = str.length;   
	    for(i = 0; i < len; i++) {   
	    	c = str.charCodeAt(i);   
	    	if ((c >= 0x0001) && (c <= 0x007F)) {   
	        	out += str.charAt(i);   
	    	} else if (c > 0x07FF) {   
	        	out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));   
	        	out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));   
	        	out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
	    	} else {   
	        	out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));   
	        	out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
	    	}   
	    }   
	    return out;   
	}

以下示例：

var str = toUtf8("钓鱼岛是中国的！");
$('#code').qrcode(str);

4、将生成canvas转化为img

<div id="qrcode"></div><!-- 可以是一个隐藏域，用于放·生成img -->

 //生成二维码
		var url ="baidu.com";
		$("#code").empty();//避免重复赋值
		$('#code').qrcode(url); //任意字符串		
   // 将生成后的二维码加入到容器·
                //获取页面的cavase对象插入DOM中
		var mycanvas1 = document.getElementsByTagName('canvas')[0];
		//将转换后的img标签插入到html中
		var img = convertCanvasToImage(mycanvas1);
		//防止重复加载，加载前先清空装img 的容器
		$('#qrcode').empty();
		//qrcode表示你要插入的容器id
		$('#qrcode').append(img);


//转换时需要的方法
//从canvas中提取图片image
var convertCanvasToImage = function convertCanvasToImage(canvas) {
    //新Image对象，可以理解为DOM
    var image = new Image();
    // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
    // 指定格式PNG
    image.src = canvas.toDataURL("image/png");
         return image;
};

5. 下载按钮（下载方法）

<span onclick="downLoadCode();">下载二维码</span>

function downLoadCode(){
		var img = $('#qrcode').children('img').attr("src");
		var alink = document.createElement("a");
		alink.href = img;
		alink.download = "测试.png";
		alink.click();
	}