<link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<div id="div1">
</div>
AMUI.qrcode.prototype.createCanvas = function(qrCodeAlg) {
//创建canvas节点
var canvas = document.createElement('canvas');
canvas.width = this.options.width;
canvas.height = this.options.height;
var ctx = canvas.getContext('2d');
//计算每个点的长宽
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);
}
}
//====== 二维码ICON start=========
function roundedRect(context, cornerX, cornerY, width, height, cornerRadius) {
if (width> 0) context.moveTo(cornerX + cornerRadius, cornerY);
else context.moveTo(cornerX - cornerRadius, cornerY);
context.arcTo(cornerX+width,cornerY,cornerX + width,cornerY+height,cornerRadius);
context.arcTo(cornerX+width,cornerY + height,cornerX,cornerY+height,cornerRadius);
context.arcTo(cornerX,cornerY+height,cornerX,cornerY,cornerRadius);
if(width> 0) {
context.arcTo(cornerX,cornerY,cornerX+cornerRadius,cornerY,cornerRadius);
}
else{
context.arcTo(cornerX,cornerY,cornerX-cornerRadius,cornerY,cornerRadius);
}
}
function drawRoundedRect(context, strokeStyle,fillStyle,cornerX,cornerY,width,height,cornerRadius) {
context.beginPath();
roundedRect(context, cornerX, cornerY, width, height, cornerRadius);
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.stroke();
context.fill();
}
if(this.options.icon.url != null){
var img = new Image,
iw = this.options.icon.iwidth,
ih = this.options.icon.iheight,
ix = (this.options.width - iw) / 2,
iy = (this.options.height - ih) / 2,
ibc = this.options.icon.ibcolor,
ibgc = this.options.background;
//img.crossOrigin = ''; //解决跨域
img.src = this.options.icon.url;
img.onload = function(){
drawRoundedRect(ctx, ibc, ibgc, ix - 5, iy - 5, iw + 10, ih + 10, 5)
ctx.drawImage(img, ix, iy, iw, ih);
}
}
//====== 二维码ICON end=========
//返回绘制的节点
return canvas;
};
//2.使用
var cfg = {
text: "http://devfm.ld-kj.cn/?dlsHusBbqjj", // 要生产二维码的文字
icon: {
url: "http://devfm.ld-kj.cn/?dlsHusBbqjj", // icon 地址
iwidth: 20, // icon 显示的宽度
iheight: 20, // icon 显示的高度
ibcolor: "red"// icon 边框颜色
},
// background:'lightblue',
// foreground:'red'
};
$('#div1').qrcode(cfg);