qrcode生成二维码并下载

  官网地址：http://jeromeetienne.github.io/jquery-qrcode/

加强版：qrcode生成二维码并下载【带logo图标】【带文字描述】-CSDN博客

遇到问题：

1、中文乱码：需要先将中文字体转码。

2、qrcode.js生成的二维码是没有白边的，需要重新绘制带有边框的canva。

3、将生成的二维码图片下载到本地。

<div class="row">预览/下载二维码 
  <a class="text-ow" ng-click="saveImageQrcode(qrcodeName)">下载</a></div>
<div class="row">
  <a class="qrcode-img" ng-click="saveImageQrcode(qrcodeName)" title="点击下载二维码"
       rwd-create-qrcode="{{qrcodeUrl}}" qrcode-size="{{qrcodeSize}}"></a>
</div>

var url = 'www.baidu.***/中文网站';
var qrcodeWidth = qrcodeHeight = 120;
if(!url) return;
//中文格式转换
var strText = toUtf8(url);
//url有值后才生成二维码
element.qrcode({
  text: strText, // 生成二维码的-链接或者文字
  render: 'canvas', //设置渲染方式 table canvas
  width: qrcodeWidth || 200,// 二维码的宽度
  height: qrcodeHeight || 200,// 二维码的高度
});
// 实际的canvas元素
var canvas = element.find('canvas').get(0);
// 创建新的canvas元素
var newCanvas = document.createElement('canvas');
var borderSize = 15; // 边框大小
newCanvas.width = canvas.width + borderSize * 2; // 增加左右边框
newCanvas.height = canvas.height + borderSize * 2; // 增加上下边框
var context = newCanvas.getContext('2d');// 获取画布上下文
// 绘制白色背景
context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, newCanvas.width, newCanvas.height);
// 在白色背景上绘制原始canvas的内容
context.drawImage(canvas, borderSize, borderSize);
// 将新的canvas转换为图片数据URL
var dataUrl = newCanvas.toDataURL('image/png');
//调用保存二维码图片的函数
scope.saveImageQrcode = function (fileName) {
  var link = document.createElement('a');//创建一个新的<a>元素
  link.download = `${fileName}.png`; // 设置下载文件的名称
  link.href = dataUrl; // 设置href为图片的数据URL
  document.body.appendChild(link); // 将链接元素添加到DOM中
  link.click(); // 模拟点击链接以开始下载
  document.body.removeChild(link); // 下载后移除链接元素，‌避免留在页面上
};

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