生成二维码及加入logo和文字

Casual_1573

已于 2024-03-19 11:43:33 修改

阅读量471

点赞数 10

分类专栏：其他文章标签： html

于 2024-03-14 11:39:44 首次发布

本文链接：https://blog.csdn.net/qq_36345633/article/details/136704572

版权

其他专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本文介绍了如何使用JavaScript和jQuery库在HTML页面中动态创建一个带有标题和Logo的二维码，展示了如何处理中文编码和调整图像布局的过程。

摘要由CSDN通过智能技术生成

<html>
<!-- 存放二维码的容器 -->
<div id='qrcode'></div>
<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> 
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script type="text/javascript" >
//解决中文乱码问题
function toUtf8(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 qrcodewidth = 400;
var qrcodeheight = 400;
//canvas宽高
var canvaswidth = qrcodewidth;
var canvasheight = qrcodeheight + 100;
//logo宽高
var logowidth = 100;
var logoheight = 100;
//文字描述位置
var textleft = qrcodewidth / 2;
var texttop = qrcodeheight + 70;
//logo位置
var logoleft = (qrcodewidth - logowidth) / 2;
var logotop = (qrcodeheight - logoheight) / 2;

var qrcode = $('#qrcode').qrcode({
	render : 'canvas',
	text : toUtf8("https://blog.csdn.net/tswc_byy"),
	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 = 'img/1.gif';    //Logo图
	logo.onload = function() {
		ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);
	}

}

</script>

最终生成效果图