html显示带logo的二维码 

<!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>
posted @   冀未然  阅读(82)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
· jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件
· Django 分页器代码
· JS 生成二维码
· java生成带logo的二维码
· Java 当中使用 “google.zxing ”开源项目 和 “github 的 qrcode-plugin” 开源项目 生成二维码
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示