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

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

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

// 二维码-白色边框大小
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');// 二维码图片
    }

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

猜你喜欢