# web-qrcode

**Repository Path**: jiangshaoneng/web-qrcode

## Basic Information

- **Project Name**: web-qrcode
- **Description**: 解决jquery.qrcode.min.js在IE6-IE8生成的二维码，打印不显示的问题。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2019-08-22
- **Last Updated**: 2022-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### jquery.qrcode.min.js 兼容 IE6
- 使用方式
```
<!-- 二维码 -->
<div id = "qrcode"></div>

// 渲染二维码
$(function() {
	var url = window.location.href;
	$("#qrcode").qrcode({
	    render: "table", // 渲染方式有table方式和canvas方式
	    width: 150,   //默认宽度
	    height: 150, //默认高度
	    text: url, //二维码内容
	    typeNumber: -1,   //计算模式一般默认为-1
	    correctLevel: 2, //二维码纠错级别
	    background: "#ffffff",  //背景颜色
	    foreground: "#000000"  //二维码颜色
	});
})
```

### 问题描述
- 通过 `jquery.qrcode.min.js` 在前端生成二维码，并且调用 `window.print();` 需要将二维码打印出来，那么问题来了。
- 渲染方式有`table`方式和`canvas`方式, 使用`canvas`必须在支持`canvas`的浏览器才能使用，比如：火狐，谷歌，IE9+ 以及其它支持canvas的浏览器中使用。
- 在IE6上（不支持`canvas`），则通过`table`的方式渲染也可以将二维码在页面上显示。但是通过 `window.print();`二维码显示不出来，`table`方式渲染就是通过往`td`中填充`background-color`来显示每个点的。由于浏览器在调用打印方法的时候会忽略调背景颜色。

### 解决思路
- 为确保IE6上也能够正常使用，可以在原有的`td`中添加`div`，使用`div`的`border-top`上边框设置为长和宽相等形成二维码的每一个小点,其余的`border-left`，`border-right`，`border-bottom`都设为`0px`。

### 修改后的代码
- gitee：
- github：
- 以下仅为修改的部分代码
```
// 以下是我修改的部分
......
c.width=h.width;c.height=h.height;
for(var d=c.getContext("2d"),b=h.width/a.getModuleCount(),e=h.height/a.getModuleCount(),f=0;f<a.getModuleCount();f++)
	for(var i=0;i<a.getModuleCount();i++){
		d.fillStyle=a.isDark(f,i)?h.foreground:h.background;
		var g=Math.ceil((i+1)*b)-Math.floor(i*b),
		j=Math.ceil((f+1)*b)-Math.floor(f*b);d.fillRect(Math.round(i*b),Math.round(f*e),g,j)

	}}else{
		a=new o(h.typeNumber,h.correctLevel);
		a.addData(h.text);a.make();
		d=Math.floor(h.width/a.getModuleCount());b=Math.floor(h.height/a.getModuleCount());
		c=r("<table></table>").css("width",d*a.getModuleCount()+"px")
			.css("height",b*a.getModuleCount()+"px").
			css("border","0px")
			.css("border-collapse","collapse")
			.css("background-color",h.background);

		for(e=0;e<a.getModuleCount();e++){
			f=r("<tr></tr>").css("height",b+"px").appendTo(c);
			for(i=0;i<a.getModuleCount();i++){
				t=r("<td></td>").css("width",d+"px").css("height",d+"px").css("padding","0px").appendTo(f);
				// 在原来的td中添加div，通过div的上边框来显示颜色。
				r("<div></div>").css("border-width",d+"px")
					.css("border-top",d+"px").css("border-bottom","0px")
					.css("border-left","0px").css("border-right","0px")
					.css("border-style","solid")
					.css("border-top-color",a.isDark(e,i)?"black":"white").appendTo(t);
			}
		}
	}
......
```

### 总结
- 在web项目中，还可以通过在后台生成二维码图片给到前台使用。这样的话就不用考虑以上的兼容问题。
- 当然我这里仅仅是考虑使用`jquery.qrcode.min.js`的时候。虽然这个方法有点曲线救国的方式。不过还是决绝的项目中的问题。