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

2024-03-18 03:32:02
开发
20

<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>

最终生成效果图

原文地址:https://blog.csdn.net/qq_36345633/article/details/136704572 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1769446613505413120.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

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

相关推荐

最近更新

热门阅读