需求：将固定网址（公司主页、博客主页……）生成二维码。

【加上公司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>code>

<script src="js/qrcode.min.js"></script>code>

……

<a ng-click="saveImageQrcode(vm.companyName)" title="点击下载公司二维码">code>

<div rwd-create-qrcode="{ {vm.qrcodeUrl}}" qrcode-logo="{ {vm.companyLogoUrl}}" qrcode-size="90"></div>code>

<div class="small text-g text-center">[点击下载]</div>code>

</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图片url

setTimeout(() => {

//生成二维码

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');// 二维码图片

}