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

<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);//设置logovar logo = new Image(logowidth, logoheight);logo.src = 'img/1.gif';    //Logo图logo.onload = function() {ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);}}</script>

最终生成效果图