需求：将固定网址（公司主页、博客主页……）生成二维码。
【加上公司logo、博客头像（位置居中）】【加上公司名、博客名（名称不要太长）】（最后没加，有些公司名太长了不好看）【二维码边上要一点留白，好看一点】【留白的最外面最好加上一个很细的边框，放在白色背景里面不会突兀】【最后需要转换成图片格式，canvas在有些手机上长按是无法识别跳转的，只有图片格式的所有手机都能长按识别跳转】【二维码可以下载到本地】结果图：
不带文字
带文字
qrcode官网地址：http://jeromeetienne.github.io/jquery-qrcode/
canvas学习： 学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程
canvas学习：HTML 画布_w3cschool
遇到问题：
1、中文乱码：需要先将中文字体转码。
2、qrcode.js生成的二维码是最简单的一个二维码，没有任何样式。
需要给canvas绘制白色边框、添加灰色线框、添加文字、绘制logo
3、将页面上的canvas替换为img图片展示（在手机上：长按知识二维码需要图片格式才能识别）。
4、将生成的二维码图片下载到本地。
html
<!--到官网去下载--><script src="js/jquery.js"></script><script src="js/qrcode.min.js"></script>……<a ng-click="saveImageQrcode(vm.companyName)" title="点击下载公司二维码"> <div rwd-create-qrcode="{{vm.qrcodeUrl}}" qrcode-logo="{{vm.companyLogoUrl}}" qrcode-size="90"></div> <div class="small text-g text-center">[点击下载]</div></a>js
// 二维码-白色边框大小var borderSize = 15; // 15px// 二维码宽高 【项目中只使用正方形的二维码，只需要一个数值就OK】var qrcodeWidth = parseInt(attrs.qrcodeSize) || 200;var qrcodeHeight = parseInt(attrs.qrcodeSize) || 200;var strText = toUtf8(attrs.rwdCreateQrcode);//中文格式转换var logoURl = attrs.qrcodeLogo;//二维码中间的logo图片urlsetTimeout(() => { //生成二维码 element.qrcode({ text: strText, // 生成二维码的-链接或者文字 render: 'canvas', //设置渲染方式 table canvas width: qrcodeWidth,// 二维码的宽度 height: qrcodeHeight,// 二维码的高度 }); var initialCanvas = element.find('canvas').get(0); // 在初始的二维码上，绘制边框+logo ，以canvas的形式展示在页面上 // drawQrcode(initialCanvas, qrcodeWidth, qrcodeHeight, borderSize, logoURl); // 在初始的二维码上，绘制边框+logo ，最终以图片的形式展示在页面上 drawQrcode(initialCanvas, qrcodeWidth, qrcodeHeight, borderSize, logoURl, function (canvas) { // 将页面的canvas隐藏，创建img来展示二维码 element.find('canvas').hide(); //隐藏掉初始的canvas var childImg=document.createElement('img');//创建img标签 element.append(childImg);// 添加img标签到当前元素下 element.find('img').attr('src', canvas.toDataURL('image/png')); // 将canvas转为图片数据，赋值给img标签 }); //调用保存二维码图片的函数 scope.saveImageQrcode = (fileName) => { // 利用 a 标签的 download 属性去下载图片 let a = document.createElement('a'); a.download = `${fileName}-二维码.png`; // 设置下载文件的名称 a.href = initialCanvas.toDataURL('image/png'); // 创建一个点击事件 const clickEvent = new MouseEvent('click'); // 触发 a 标签的点击事件 a.dispatchEvent(clickEvent); };}, 100);1、中文乱码：query-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式。英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。需要先将中文字体转码。
function toUtf8(str) { //二维码编码前把字符串转换成UTF-8 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;}2、qrcode.js生成的二维码是最简单的一个二维码，没有任何样式。
需要给canvas绘制白色边框、添加灰色线框、添加文字、绘制logo
/* 在初始的二维码上，绘制边框+logo+文字 * canvas:qrcodejs生成的二维码canvas * qrcodeWidth:二维码的宽度 * qrcodeHeight:二维码的高度 * borderSize:二维码白边大小 * logoUrl:logo的url【有些二维码没有logo】 * callback:回调函数，返回生成的二维码图片的url * **/ function drawQrcode(canvas, qrcodeWidth, qrcodeHeight, borderSize, logoUrl, callback) { // logo宽高：是二维码的大小的1/4 let logoWidth = qrcodeWidth / 4; let logoHeight = qrcodeHeight / 4; //logo位置：位于二维码中间 let logoLeft = (qrcodeWidth - logoWidth) / 2 + borderSize;//logo距离左边的数值 = (二维码宽度 - logo宽度) / 2 + 白边宽度 let logoTop = (qrcodeHeight - logoHeight) / 2 + borderSize;//logo距离顶部的数值 = (二维码高度 - logo高度) / 2 + 白边宽度 const image = new Image();//二维码图片对象 const logoImage = new Image(logoWidth, logoHeight);//logo图片对象 // 解决跨域问题 image.setAttribute('crossOrigin', 'anonymous'); logoImage.setAttribute('crossOrigin', 'anonymous'); // 图片加载完成后，通过canvas处理 const context = canvas.getContext('2d'); // qrcodejs 生成的二维码加载完成后，开始 canvas 绘制 image.onload = function () { // 通过canvas绘制，canvas的宽高设置为二维码图片宽高+白边宽度（上下borderSize） canvas.width = qrcodeWidth + borderSize * 2; canvas.height = qrcodeHeight + borderSize * 2; /// // 设置画布背景 context.fillStyle = '#ffffff'; // 带白色边框borderSize context.fillRect(0, 0, canvas.width, canvas.height); /// // 给轮廓图形设置填充样式 context.strokeStyle = '#dddddd'; // 给轮廓矩形设置线宽 context.lineWidth = 2; //默认1px // 绘制线框 context.strokeRect(0, 0, canvas.width, canvas.height); /// //添加文字的时候：需要设置 canvas.height = qrcodeHeight + borderSize * 2 + 10;（10px为文字的位置） //text位置：位于二维码中间 // let textLeft = canvas.width / 2;//text距离左边的数值 = canvas的宽度 / 2 // let textTop = canvas.height - 10;//text距离顶部的数值 = canvas的宽度 - 底部留白的高度 // //设置文字样式 // context.fillStyle = '#000000'; // context.font = 'bold ' + 12 + 'px Arial'; // context.textAlign = 'center'; // //文字描述 // context.fillText('我的博客', textLeft, textTop); /// //绘制二维码 // padding:borderSize context.drawImage(image, borderSize, borderSize); // 目标图像-二维码 /// // 有logoURl，绘制logo；没有的时候直接返回最终canvas if (logoUrl) { // 中间的logo加载完成后，绘制logo logoImage.onload = function () { // 绘制logo图像，context.drawImage(logoImage,logoX, logoY, logoImage.width, logoImage.height); context.drawImage(logoImage, logoLeft, logoTop, logoWidth, logoHeight); // 将最终canvas传到回调函数中 callback && callback(canvas); }; // 获取logoUrl，赋值给logoImage，触发logoImage的onload方法 logoImage.src = logoUrl; } else { // 将最终canvas传到回调函数中 callback && callback(canvas); } }; // canvas转为图片数据，赋值给image，触发image的onload方法 image.src = canvas.toDataURL('image/png');// 二维码图片 }