QRCode.js:使用 JavaScript 生成二维码

本文介绍了如何使用JavaScript库QRCode.js生成二维码。在项目需求中,为了方便手机扫码查看库单和入库单,作者选择了QRCode.js。文章提供QRCode.js的源码链接,并展示了简单的使用方法,包括创建div元素和设置CSS,以及通过JavaScript引用和调用库来避免"_el.appendChild is not a function"的错误。
摘要由CSDN通过智能技术生成

最近项目要求,打印出库单入库单但是同时在打印的单据上显示网页二维码方便手机扫码查看。接到要求首先度娘,发现网上相关的插件还是蛮多的,最后我选择用了QRCode.js
效果图:
在这里插入图片描述
首先给一下QRCode.js的源码,找不到下载链接的朋友直接粘贴就可以了

/**
 * @fileoverview
 * - Using the 'QRCode for Javascript library'
 * - Fixed dataset of 'QRCode for Javascript library' for support full-spec.
 * - this library has no dependencies.
 * 
 * @author davidshimjs
 * @see <a href="http://www.d-project.com/" target="_blank">http://www.d-project.com/</a>
 * @see <a href="http://jeromeetienne.github.com/jquery-qrcode/" target="_blank">http://jeromeetienne.github.com/jquery-qrcode/</a>
 */
var QRCode;

(function () {
   
	//---------------------------------------------------------------------
	// QRCode for JavaScript
	//
	// Copyright (c) 2009 Kazuhiko Arase
	//
	// URL: http://www.d-project.com/
	//
	// Licensed under the MIT license:
	//   http://www.opensource.org/licenses/mit-license.php
	//
	// The word "QR Code" is registered trademark of 
	// DENSO WAVE INCORPORATED
	//   http://www.denso-wave.com/qrcode/faqpatent-e.html
	//
	//---------------------------------------------------------------------
	function QR8bitByte(data) {
   
		this.mode = QRMode.MODE_8BIT_BYTE;
		this.data = data;
		this.parsedData = [];

		// Added to support UTF-8 Characters
		for (var i = 0, l = this.data.length; i < l; i++) {
   
			var byteArray = [];
			var code = this.data.charCodeAt(i);

			if (code > 0x10000) {
   
				byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);
				byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);
				byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);
				byteArray[3] = 0x80 | (code & 0x3F);
			} else if (code > 0x800) {
   
				byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12);
				byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6);
				byteArray[2] = 0x80 | (code & 0x3F);
			} else if (code > 0x80) {
   
				byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6);
				byteArray[1] = 0x80 | (code & 0x3F);
			} else {
   
				byteArray[0] = code;
			}

			this.parsedData.push(byteArray);
		}

		this.parsedData = Array.prototype.concat.apply([], this.parsedData);

		if (this.parsedData.length != this.data.length) {
   
			this.parsedData.unshift(191);
			this.parsedData.unshift(187);
			this.parsedData.unshift(239);
		}
	}

	QR8bitByte.prototype = {
   
		getLength: function (buffer) {
   
			return this.parsedData.length;
		},
		write: function (buffer) {
   
			for (var i = 0, l = this.parsedData.length; i < l; i++) {
   
				buffer.put(this.parsedData[i], 8);
			}
		}
	};

	function QRCodeModel(typeNumber, errorCorrectLevel) {
   
		this.typeNumber = typeNumber;
		this.errorCorrectLevel = errorCorrectLevel;
		this.modules = null;
		this.moduleCount = 0;
		this.dataCache = null;
		this.dataList = [];
	}

	QRCodeModel.prototype={
   addData:function(data){
   var newData=new QR8bitByte(data);this.dataList.push(newData);this.dataCache=null;},isDark:function(row,col){
   if(row<0||this.moduleCount<=row||col<0||this.moduleCount<=col){
   throw new Error(row+","+col);}
	return this.modules[row][col];},getModuleCount:function(){
   return this.moduleCount;},make:function(){
   this.makeImpl(false,this.getBestMaskPattern());},makeImpl:function(test,maskPattern){
   this.moduleCount=this.typeNumber*4+17;this.modules=new Array(this.moduleCount);for(var row=0;row<this.moduleCount;row++){
   this.modules[row]=new Array(this.moduleCount);for(var col=0;col<this.moduleCount;col++){
   this.modules[row][col]=null;}}
	this.setupPositionProbePattern(0,0);this.setupPositionProbePattern(this.moduleCount-7,0);this.setupPositionProbePattern(0,this.moduleCount-7);this.setupPositionAdjustPattern();this.setupTimingPattern();this.setupTypeInfo(test,maskPattern);if(this.typeNumber>=7){
   this.setupTypeNumber(test);}
	if(this.dataCache==null){
   this.dataCache=QRCodeModel.createData(this.typeNumber,this.errorCorrectLevel,this.dataList);}
	this.mapData(this.dataCache,maskPattern);},setupPositionProbePattern:function(row,col){
   for(var r=-1;r<=7;r++){
   if(row+r<=-1||this.moduleCount<=row+r)continue;for(var c=-1;c<=7;c++){
   if(col+c<=-1||this.moduleCount<=col+c)continue;if((0<=r&&r<=6&&(c==0||c==6))||(0<=c&&c<=6&&(r==0||r==6))||(2<=r&&r<=4&&2<=c&&c<=4)){
   this.modules[row+r][col+c]=true;}else{
   this.modules[row+r][col+c]=false;}}}},getBestMaskPattern:function(){
   var minLostPoint=0;var pattern=0;for(var i=0;i<8;i++){
   this.makeImpl(true,i);var lostPoint=QRUtil.getLostPoint(this);if(i==0||minLostPoint>lostPoint){
   minLostPoint=lostPoint;pattern=i;}}
	return pattern;},createMovieClip:function(target_mc,instance_name,depth){
   var qr_mc=target_mc.createEmptyMovieClip(instance_name,depth);var cs=1;this.make();for(var row=0;row<this.modules.length;row++){
   var y=row*cs;for(var col=0;col<this.modules[row].length;col++){
   var x=col*cs;var dark=this.modules[row][col];if(dark){
   qr_mc.beginFill(0,100);qr_mc.moveTo(x,y);qr_mc.lineTo(x+cs,y);qr_mc.lineTo(x+cs,y+cs);qr_mc.lineTo(x,y+cs);qr_mc.endFill();}}}
	return qr_mc;},setupTimingPattern:function(){
   for(var r=8;r<this.moduleCount-8;r++){
   if(this.modules[r][6]!=null){
   continue;}
	this.modules[r][6]=(r%2==0);}
	for(var c=8;c<this.moduleCount-8;c++){
   if(this.modules[6][c]!=null){
   continue;}
	this.modules[6][c]=(c%2==0);}},setupPositionAdjustPattern:function(){
   var pos=QRUtil.getPatternPosition(this.typeNumber);for(var i=0;i<pos.length;i++){
   for(var j=0;j<pos.length;j++){
   var row=pos[i];var col=pos[j];if(this.modules[row][col]!=null){
   continue;}
	for(var r=-2;r<=2;r++){
   for(var c=-2;c<=2;c++){
   if(r==-2||r==2||c==-2||c==2||(r==0&&c==0)){
   this.modules[row+r][col+c]=true;}else{
   this.modules[row+r][col+c]=false;}}}}}},setupTypeNumber:function(test){
   var bits=QRUtil.getBCHTypeNumber(this.typeNumber);for(var i=0;i<18;i++){
   var mod=(!test&&((bits>>i)&1)==1);this.modules[Math.floor(i/3)][i%3+this.moduleCount-8-3]=mod;}
	for(var i=0;i<18;i++){
   var mod=(!test&&((bits>>i)&1)==1);this.modules[i%3+this.moduleCount-8-3][Math.floor(i/3)]=mod;}},setupTypeInfo:function(test,maskPattern){
   var data=(this.errorCorrectLevel<<3)|maskPattern;var bits=QRUtil.getBCHTypeInfo(data);for(var i=0;i<15;i++){
   var mod=(!test&&((bits>>i)&1)==1);if(i<6){
   this.modules[i][8]=mod;}else if(i<8){
   this.modules[i+1][8]=mod;}else{
   this.modules[this.moduleCount-15+i][8]=mod;}}
	for(var i=0;i<15;i++){
   var mod=(!test&&((bits>>i)&1)==1);if(i<8){
   this.modules[8][this.moduleCount-i-1]=mod;}else if(i<9){
   this.modules[8][15-i-1+1]=mod;}else{
   this.modules[8][15-i-1]=mod;}}
	this.modules[this.moduleCount-8][8]=(!test);},mapData:function(data,maskPattern){
   var inc=-1;var row=this.moduleCount-1;var bitIndex=7;var byteIndex=0;for(var col=this.moduleCount-1;col>0;col-=2){
   if(col==6)col--;while(true){
   for(var c=0;c<2;c++){
   if(this.modules[row][col-c]==null){
   var dark=false;if(byteIndex<data.length){
   dark=(((data[byteIndex]>>>bitIndex)&1)==1);}
	var mask=QRUtil.getMask(maskPattern,row,col-c);if(mask){
   dark=!dark;}
	this.modules[row][col-c]=dark;bitIndex--;if(bitIndex==-1){
   byteIndex++;bitIndex=7;}}}
	row+=inc;if(row<0||this.moduleCount<=row){
   row-=inc;inc=-inc;break;}}}}};QRCodeModel.PAD0=0xEC;QRCodeModel.PAD1=0x11;QRCodeModel.createData=function(typeNumber,errorCorrectLevel,dataList){
   var rsBlocks=QRRSBlock.getRSBlocks(typeNumber,errorCorrectLevel);var buffer=new QRBitBuffer();for(var i=0;i<dataList.length;i++){
   
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值