jquery.qrcode二维码加文字描述和图片

本文主要是介绍jquery.qrcode二维码加文字描述和图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

零、码仙励志

你害怕一件事，可还是要去做，那才是勇敢

一、下载

微信搜索公众号码海无际或扫描左侧二维码回复c012获取，

如果不会请给我留言或者加QQ194760901找我索要

二、使用

工程目录截图

test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery.qrcode.min.js"></script>
</head>
<body><div id="qrcode"></div><canvas></canvas><script>//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 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 : utf16to8("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);//设置logovar logo = new Image(logowidth, logoheight);logo.src = 'assets/img/hui.jpg';logo.onload = function() {ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);}}</script>
</body>
</html>

运行结果