Skip to content

Commit

Permalink
1. 增加image配置
Browse files Browse the repository at this point in the history 
2. 增加pdground配置
  • Loading branch information
@sehuo
sehuo committed Aug 5, 2015
1 parent aa66eb4 commit 9bbd0a2
Showing 1 changed file with 143 additions and 48 deletions.
191 changes: 143 additions & 48 deletions src/qrcode.js
View file
@@ -1,6 +1,54 @@
var $ = require('jquery');
var QRCodeAlg = require('./qrcodealg');
var qrcodeAlgObjCache = [];
/**
* 预载图片
*/
var loadImage = function(url,callback){
var img = new Image();
img.src = url;
img.onload = function () {
callback(this);
img.onload = null
};
}
/**
* 计算矩阵点的前景色
* @param {Obj} config
* @param {Number} config.row 点x坐标
* @param {Number} config.col 点y坐标
* @param {Number} config.count 矩阵大小
* @param {Number} config.options 组件的options
* @return {String}
*/
var getForeGround = function(config){
var options = config.options;
if( options.pdground && (
(config.row > 1 && config.row < 5 && config.col >1 && config.col<5)
|| (config.row > (config.count - 6) && config.row < (config.count - 2) && config.col >1 && config.col<5)
|| (config.row > 1 && config.row < 5 && config.col > (config.count - 6) && config.col < (config.count - 2))
)){
return options.pdground;
}
return options.foreground;
}
/**
* 点是否在Position Detection
* @param {row} 矩阵行
* @param {col} 矩阵列
* @param {count} 矩阵大小
* @return {Boolean}
*/
var inPositionDetection = function(row, col, count){
if(
(row<7 && col<7)
|| (row > (count - 8) && col < 7)
|| (row < 7 && col >(count - 8) )
){
return true;
}
return false;
}

/**
* 二维码构造函数，主要用于绘制
Expand All @@ -21,7 +69,10 @@ var qrcode = function(opt) {
height: 256,
correctLevel: 3,
background: "#ffffff",
foreground: "#000000"
foreground: "#000000",
image : '',
imageWidth: 30,
imageHeight: 30
}, opt);

//使用QRCodeAlg创建二维码结构
Expand All @@ -32,6 +83,7 @@ var qrcode = function(opt) {
break;
}
}

if(i == l){
qrCodeAlg = new QRCodeAlg(this.options.text, this.options.correctLevel);
qrcodeAlgObjCache.push({text:this.options.text, correctLevel: this.options.correctLevel, obj:qrCodeAlg});
Expand Down Expand Up @@ -67,24 +119,39 @@ qrcode.prototype.createDefault = function(qrCodeAlg) {
};
qrcode.prototype.createCanvas = function(qrCodeAlg) {
//创建canvas节点
var that = this;
var canvas = document.createElement('canvas');
canvas.width = this.options.width;
canvas.height = this.options.height;
canvas.width = that.options.width;
canvas.height = that.options.height;
var ctx = canvas.getContext('2d');
var count = qrCodeAlg.getModuleCount();

//计算每个点的长宽
var tileW = (this.options.width / qrCodeAlg.getModuleCount()).toPrecision(4);
var tileH = this.options.height / qrCodeAlg.getModuleCount().toPrecision(4);

//绘制
for (var row = 0; row < qrCodeAlg.getModuleCount(); row++) {
for (var col = 0; col < qrCodeAlg.getModuleCount(); col++) {
ctx.fillStyle = qrCodeAlg.modules[row][ col] ? this.options.foreground : this.options.background;
var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
var tileW = (that.options.width / count).toPrecision(4);
var tileH = (that.options.height / count).toPrecision(4);
//绘制

for (var row = 0; row < count; row++) {
for (var col = 0; col < count; col++) {
var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
var foreground = getForeGround({
row : row,
col : col,
count : count,
options : that.options
});
ctx.fillStyle = qrCodeAlg.modules[row][col] ? foreground : that.options.background;
ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
}
}
if(that.options.image){
loadImage(that.options.image, function(img){
var x = ((that.options.width - that.options.imageWidth)/2).toFixed(2);
var y = ((that.options.height - that.options.imageHeight)/2).toFixed(2);
ctx.drawImage(img, x, y, that.options.imageWidth, that.options.imageHeight);
});
}
//返回绘制的节点
return canvas;
};
Expand All @@ -93,45 +160,61 @@ qrcode.prototype.createCanvas = function(qrCodeAlg) {
* @return {}
*/
qrcode.prototype.createTable = function(qrCodeAlg) {
//创建table节点
var s = [];
s.push('<table style="border:0px; margin:0px; padding:0px; border-collapse:collapse; background-color: '+
this.options.background +
';">');
var count = qrCodeAlg.getModuleCount();

// 计算每个节点的长宽；取整，防止点之间出现分离
var tileW = -1, tileH = -1, caculateW = -1, caculateH = -1;
tileW = caculateW = Math.floor(this.options.width / qrCodeAlg.getModuleCount());
tileH = caculateH = Math.floor(this.options.height / qrCodeAlg.getModuleCount());
if(caculateW <= 0){
if(qrCodeAlg.getModuleCount() < 80){
tileW = 2;
} else {
tileW = 1;
}
var tileW = Math.floor(this.options.width / count);
var tileH = Math.floor(this.options.height / count);
if(tileW <= 0){
tileW = count < 80 ? 2 : 1;
}
if(caculateH <= 0){
if(qrCodeAlg.getModuleCount() < 80){
tileH = 2;
} else {
tileH = 1;
}
if(tileH <= 0){
tileH = count < 80 ? 2 : 1;
}

//创建table节点
//重算码大小
var s = [];
s.push('<table style="border:0px; margin:0px; padding:0px; border-collapse:collapse; background-color: '+
this.options.background +
';">');

// 绘制二维码
foreTd = '<td style="border:0px; margin:0px; padding:0px; width:'+tileW+'px; background-color: '+this.options.foreground+'"></td>',
backTd = '<td style="border:0px; margin:0px; padding:0px; width:'+tileW+'px; background-color: '+this.options.background+'"></td>',
l = qrCodeAlg.getModuleCount();
var backTd = '<td style="border:0px; margin:0px; padding:0px; width:'+tileW+'px; background-color: '+this.options.background+'"></td>';

for (var row = 0; row < l; row++) {
for (var row = 0; row < count; row++) {
s.push('<tr style="border:0px; margin:0px; padding:0px; height: ' + tileH +'px">');
for (var col = 0; col < l; col++) {
s.push(qrCodeAlg.modules[row][col] ? foreTd : backTd);
for (var col = 0; col < count; col++) {
var foreground = getForeGround({
row : row,
col : col,
count : count,
options : this.options
});
s.push(qrCodeAlg.modules[row][col] ? '<td style="border:0px; margin:0px; padding:0px; width:'+tileW+'px; background-color: '+ foreground+'"></td>' : backTd);
}
s.push('</tr>');
}
s.push('</table>');

if(this.options.image){
// 计算表格的总大小
var width = tileW * count;
var height = tileH * count;
var x = ((width - this.options.imageWidth)/2).toFixed(2);
var y = ((height - this.options.imageHeight)/2).toFixed(2);
s.unshift('<div style="position: relative;width:'+
width+'px; height: '+
height+'px;">');
s.push('<img src="'+ this.options.image +'" width="'+
this.options.imageWidth +'" height="'+
this.options.imageHeight +'" style="position:absolute;'+
'left:'+ x +'px; top:'+ y +'px;">');
s.push('</div>');
}

var span = document.createElement("span");
span.innerHTML=s.join('');
span.innerHTML=s.join('');

return span.firstChild;
};
Expand All @@ -142,20 +225,26 @@ qrcode.prototype.createTable = function(qrCodeAlg) {
*/
qrcode.prototype.createSVG = function (qrCodeAlg){
var x, dx, y, dy,
moduleCount = qrCodeAlg.getModuleCount(),
scale = this.options.height / this.options.width,
svg = '<svg xmlns="http://www.w3.org/2000/svg" '
count = qrCodeAlg.getModuleCount(),
scale = this.options.height / this.options.width,
svg = '<svg xmlns="http://www.w3.org/2000/svg" '
+ 'width="'+ this.options.width + 'px" height="' + this.options.height + 'px" '
+ 'viewbox="0 0 ' + moduleCount * 10 + ' ' + moduleCount * 10 * scale + '">',
+ 'viewbox="0 0 ' + count * 10 + ' ' + count * 10 * scale + '">',
rectHead = '<path ',
foreRect = ' style="stroke-width:0.5;stroke:' + this.options.foreground
+ ';fill:' + this.options.foreground + ';"></path>',
backRect = ' style="stroke-width:0.5;stroke:' + this.options.background
+ ';fill:' + this.options.background + ';"></path>';

// draw in the svg
for (var row = 0; row < moduleCount; row++) {
for (var col = 0; col < moduleCount; col++) {
for (var row = 0; row < count; row++) {
for (var col = 0; col < count; col++) {
var foreground = getForeGround({
row : row,
col : col,
count : count,
options : this.options
});
var foreRect = ' style="stroke-width:0.5;stroke:' + foreground
+ ';fill:' + foreground + ';"></path>';
x = col * 10;
y = row * 10 * scale;
dx = (col + 1) * 10;
Expand All @@ -171,6 +260,12 @@ qrcode.prototype.createSVG = function (qrCodeAlg){
}
}

if(this.options.image){
var x = ((this.options.width - this.options.imageWidth)/2).toFixed(2);
var y = ((this.options.height - this.options.imageHeight)/2).toFixed(2);
svg += '<image xlink:href="'+ this.options.image + '" x="'+ x +'" y="'+ y +'" width="'+ this.options.imageWidth +'" height="'+ this.options.imageHeight +'"/>';
}

svg += '</svg>';

// return just built svg
Expand Down

0 comments on commit 9bbd0a2

Please sign in to comment.