qrcode生成二维码并下载【带logo图标】【带文字描述】

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

结果图：

不带文字

带文字

遇到问题：

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

2、qrcode.js生成的二维码是没有白边的，需要重新绘制边框+logo+文字

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

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

setTimeout(() => {
  //生成二维码
  element.qrcode({
    text: strText, // 生成二维码的-链接或者文字
    render: 'canvas', //设置渲染方式 table canvas
    width: qrcodeWidth,// 二维码的宽度
    height: qrcodeHeight,// 二维码的高度
  });
  var initialCanvas = element.find('canvas').get(0);
  // 在初始的二维码上，绘制边框+logo
  drawQrcode(initialCanvas, qrcodeWidth, qrcodeHeight, borderSize, logoURl);

  //调用保存二维码图片的函数
  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生成的二维码是没有白边的，需要重新绘制边框+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);
        ///
        //添加文字的时候：需要设置 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');// 二维码图片
    }