<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制作带logo的二维码</title>
<script type="text/javascript" src='../static/bootstrap-3.4.1/js/jquery-3.5.1.min.js'></script>
<script type="text/javascript" src='../static/bootstrap-3.4.1/js/jquery.qrcode.min.js'></script>
</head>
<body>
<div id="qrcode"></div>
<div id="thecode"></div>
<canvas></canvas>
<script>
// 分离颜色参数 返回一个数组
var colorRgb = (function () {
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
return function (str) {
var sColor = str.toLowerCase();
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange;
} else {
var sColorChange = sColor.replace(/(rgb\()|(\))/g, "").split(",").map(function (a) {
return parseInt(a);
});
return sColorChange;
}
}
})();
// 验证该位置的像素 不是背景色为true
function checkColor(i, j, width, bg) {
var x = calc(width, i, j);
if (imgD.data[x] != bg[0] && imgD.data[x + 1] != bg[1] && imgD.data[x + 2] != bg[2]) {
return true;
} else {
return false;
}
}
// 改变颜色值
function changeColor(i, j, colorArr) {
var x = calc(width, i, j);
imgD.data[x] = colorArr[0];
imgD.data[x + 1] = colorArr[1];
imgD.data[x + 2] = colorArr[2];
}
// 返回对应像素点的序号
function calc(width, i, j) {
if (j < 0) {
j = 0;
}
return 4 * (i * width + j);
}
// 方向数组
var next = [
[0, 1], //右
[1, 0], //下
[0, -1], // 左
[-1, 0] //上
];
// 深度优先搜索
function dfs(x, y, color) {
changeColor(x, y, color);
for (var k = 0; k <= 3; k++) {
// 下一个坐标
var tx = x + next[k][0];
var ty = y + next[k][1];
//判断越界
if (tx < 0 || tx >= height || ty < 0 || ty >= width) {
continue;
}
if (book[tx][ty] == 0 && checkColor(tx, ty, width, bg)) {
// 判断位置
book[tx][ty] = 1;
dfs(tx, ty, color);
}
}
return;
}
/*****上面为封装的函数*****/
/***参数***/
var bg = colorRgb("#fff"); //忽略的背景色
var width = 220;
var height = 220;
var imgD; //预留给 像素信息数组
var colors = ["#368BFF", "#EF2767", "#F17900", "#399690", "#5aa6f7", "#fd417e", "#ffc000", "#59b6a6"]; //染色数组
// 随机colors数组的一个序号
var ranNum = (function () {
var len = colors.length;
return function () {
return Math.floor(Math.random() * len);
}
})();
// 标记数组
var book = [];
for (var i = 0; i < height; i++) {
book[i] = [];
for (var j = 0; j < width; j++) {
book[i][j] = 0;
}
}
// canvas 部分
var canvas = $("canvas")[0];
var ctx = canvas.getContext("2d");
var theimg = new Image();
theimg.src = '../static/img/vcard.png'; //这里的path就是图片的地址
theimg.onload = function () {
ctx.drawImage(theimg, 0, 0, width, height);
imgD = ctx.getImageData(0, 0, width, height);
for (var i = 0; i < height; i++) {
for (var j = 0; j < width; j++) {
if (book[i][j] == 0 && checkColor(i, j, width, bg)) { //没标记过 且是非背景色
book[i][j] = 1;
var color = colorRgb(colors[ranNum()]);
dfs(i, j, color); //深度优先搜索
}
}
}
ctx.putImageData(imgD, 0, 0);
$('.thecode').value = theimg;
}
//jquery-qrcode不支持中文,改变一下编码就支持了！
function utf16to8(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 SIZE = 100
var qrcodewidth = SIZE;
var qrcodeheight = SIZE;
//canvas宽高
var canvaswidth = qrcodewidth;
var canvasheight = qrcodeheight; // + 100
//logo宽高
var logowidth = SIZE / 4;
var logoheight = SIZE / 4;
//文字描述位置
var textleft = qrcodewidth / 2;
var texttop = qrcodeheight + SIZE * 80 / 400;
//logo位置
var logoleft = (qrcodewidth - logowidth) / 2;
var logotop = (qrcodeheight - logoheight) / 2;
var vCardData = 'BEGIN:VCARD\nVERSION:3.0\nFN:我的姓名\nORG:*我的***************单位名称\nADR:具体单位地址'
+ '\nTEL:联系电话\nEMAIL:具体邮箱地址\nEND:VCARD';
var qrcode = $('#qrcode').qrcode({
render: 'canvas',
text: utf16to8(vCardData),
width: qrcodewidth,
height: qrcodeheight,
background: '#ffffff',
foreground: '#000000',
});
var canvas = qrcode.find('canvas').get(0);
var img = new Image();
img.src = canvas.toDataURL('image/png');
img.onload = function () {
canvas.width = canvaswidth;
canvas.height = canvasheight;
var ctx = canvas.getContext('2d');
//设置画布背景
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//设置文字样式
ctx.fillStyle = '#000000';
ctx.font = 'bold ' + 50 + 'px Arial';
ctx.textAlign = 'center';
//文字描述
ctx.fillText("李哥的博客", textleft, texttop);
//绘制二维码
ctx.drawImage(img, 0, 0);
//设置logo
var logo = new Image(logowidth, logoheight);
logo.src = '../static/img/cnpc.ico';
logo.onload = function () {
ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号