【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 

1. <!--到官网去下载-->
2. <script src="js/jquery.js"></script>
3. <script src="js/qrcode.min.js"></script>
4. ……
5. <a ng-click="saveImageQrcode(vm.companyName)" title="点击下载公司二维码">
6.   <div rwd-create-qrcode="{{vm.qrcodeUrl}}" qrcode-logo="{{vm.companyLogoUrl}}" qrcode-size="90"></div>
7.   <div class="small text-g text-center">[点击下载]</div>
8. </a>

复制代码

 js

1. // 二维码-白色边框大小
2. var borderSize = 15; // 15px
3. // 二维码宽高 【项目中只使用正方形的二维码，只需要一个数值就OK】
4. var qrcodeWidth = parseInt(attrs.qrcodeSize) || 200;
5. var qrcodeHeight = parseInt(attrs.qrcodeSize) || 200;
6. var strText = toUtf8(attrs.rwdCreateQrcode);//中文格式转换
7. var logoURl = attrs.qrcodeLogo;//二维码中间的logo图片url
9. setTimeout(() => {
10.   //生成二维码
11.   element.qrcode({
12.     text: strText, // 生成二维码的-链接或者文字
13.     render: 'canvas', //设置渲染方式 table canvas
14.     width: qrcodeWidth,// 二维码的宽度
15.     height: qrcodeHeight,// 二维码的高度
16.   });
17.   var initialCanvas = element.find('canvas').get(0);
18.   // 在初始的二维码上，绘制边框+logo ，以canvas的形式展示在页面上
19.   // drawQrcode(initialCanvas, qrcodeWidth, qrcodeHeight, borderSize, logoURl);
21.   // 在初始的二维码上，绘制边框+logo ，最终以图片的形式展示在页面上
22.   drawQrcode(initialCanvas, qrcodeWidth, qrcodeHeight, borderSize, logoURl, function (canvas) {
23.     // 将页面的canvas隐藏，创建img来展示二维码
24.     element.find('canvas').hide(); //隐藏掉初始的canvas
25.     var childImg=document.createElement('img');//创建img标签
26.     element.append(childImg);// 添加img标签到当前元素下
27.     element.find('img').attr('src', canvas.toDataURL('image/png')); // 将canvas转为图片数据，赋值给img标签
28.   });
30.   //调用保存二维码图片的函数
31.   scope.saveImageQrcode = (fileName) => {
32.     // 利用 a 标签的 download 属性去下载图片
33.     let a = document.createElement('a');
34.     a.download = `${fileName}-二维码.png`; // 设置下载文件的名称
35.     a.href = initialCanvas.toDataURL('image/png');
36.     // 创建一个点击事件
37.     const clickEvent = new MouseEvent('click');
38.     // 触发 a 标签的点击事件
39.     a.dispatchEvent(clickEvent);
40.   };
42. }, 100);

复制代码

1、中文乱码：query-qrcode这个库是接纳 charCodeAt() 这个方式举行编码转换的，这个方法默认会获取它的 Unicode 编码，一般的解码器都是接纳UTF-8, ISO-8859-1等方式。英文是没有问题，如果是中文，一般环境下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。必要先将中文字体转码。

1. function toUtf8(str) { //二维码编码前把字符串转换成UTF-8
2.   var out, i, len, c;
3.   out = '';
4.   len = str.length;
5.   for (i = 0; i < len; i++) {
6.     c = str.charCodeAt(i);
7.     if ((c >= 0x0001) && (c <= 0x007F)) {
8.       out += str.charAt(i);
9.     } else if (c > 0x07FF) {
10.       out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
11.       out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
12.       out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
13.     } else {
14.       out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
15.       out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
16.     }
17.   }
18.   return out;
19. }

复制代码

2、qrcode.js生成的二维码是最简单的一个二维码，没有任何样式。
      必要给canvas绘制白色边框、添加灰色线框、添加文字、绘制logo

1.    /* 在初始的二维码上，绘制边框+logo+文字
2.     * canvas:qrcodejs生成的二维码canvas
3.     * qrcodeWidth:二维码的宽度
4.     * qrcodeHeight:二维码的高度
5.     * borderSize:二维码白边大小
6.     * logoUrl:logo的url【有些二维码没有logo】
7.     * callback:回调函数，返回生成的二维码图片的url
8.     * **/
9.     function drawQrcode(canvas, qrcodeWidth, qrcodeHeight, borderSize, logoUrl, callback) {
10.       // logo宽高：是二维码的大小的1/4
11.       let logoWidth = qrcodeWidth / 4;
12.       let logoHeight = qrcodeHeight / 4;
13.       //logo位置：位于二维码中间
14.       let logoLeft = (qrcodeWidth - logoWidth) / 2 + borderSize;//logo距离左边的数值 = (二维码宽度 - logo宽度) / 2 + 白边宽度
15.       let logoTop = (qrcodeHeight - logoHeight) / 2 + borderSize;//logo距离顶部的数值 = (二维码高度 - logo高度) / 2 + 白边宽度
17.       const image = new Image();//二维码图片对象
18.       const logoImage = new Image(logoWidth, logoHeight);//logo图片对象
19.       // 解决跨域问题
20.       image.setAttribute('crossOrigin', 'anonymous');
21.       logoImage.setAttribute('crossOrigin', 'anonymous');
23.       // 图片加载完成后，通过canvas处理
24.       const context = canvas.getContext('2d');
25.       // qrcodejs 生成的二维码加载完成后，开始 canvas 绘制
26.       image.onload = function () {
27.         // 通过canvas绘制，canvas的宽高设置为二维码图片宽高+白边宽度（上下borderSize）
28.         canvas.width = qrcodeWidth + borderSize * 2;
29.         canvas.height = qrcodeHeight + borderSize * 2;
30.         ///
31.         // 设置画布背景
32.         context.fillStyle = '#ffffff';
33.         // 带白色边框borderSize
34.         context.fillRect(0, 0, canvas.width, canvas.height);
35.         ///
36.         // 给轮廓图形设置填充样式
37.         context.strokeStyle = '#dddddd';
38.         // 给轮廓矩形设置线宽
39.         context.lineWidth = 2; //默认1px
40.         // 绘制线框
41.         context.strokeRect(0, 0, canvas.width, canvas.height);
42.         ///
43.         //添加文字的时候：需要设置 canvas.height = qrcodeHeight + borderSize * 2 + 10;（10px为文字的位置）
44.         //text位置：位于二维码中间
45.         // let textLeft = canvas.width / 2;//text距离左边的数值 = canvas的宽度 / 2
46.         // let textTop = canvas.height - 10;//text距离顶部的数值 = canvas的宽度 - 底部留白的高度
47.         // //设置文字样式
48.         // context.fillStyle = '#000000';
49.         // context.font = 'bold ' + 12 + 'px Arial';
50.         // context.textAlign = 'center';
51.         // //文字描述
52.         // context.fillText('我的博客', textLeft, textTop);
53.         ///
54.         //绘制二维码
55.         // padding:borderSize
56.         context.drawImage(image, borderSize, borderSize); // 目标图像-二维码
57.         ///
58.         // 有logoURl，绘制logo；没有的时候直接返回最终canvas
59.         if (logoUrl) {
60.           // 中间的logo加载完成后，绘制logo
61.           logoImage.onload = function () {
62.             // 绘制logo图像，context.drawImage(logoImage,logoX, logoY, logoImage.width, logoImage.height);
63.             context.drawImage(logoImage, logoLeft, logoTop, logoWidth, logoHeight);
64.             // 将最终canvas传到回调函数中
65.             callback && callback(canvas);
66.           };
67.           // 获取logoUrl，赋值给logoImage，触发logoImage的onload方法
68.           logoImage.src = logoUrl;
69.         } else {
70.           // 将最终canvas传到回调函数中
71.           callback && callback(canvas);
72.         }
73.       };
74.       // canvas转为图片数据，赋值给image，触发image的onload方法
75.       image.src = canvas.toDataURL('image/png');// 二维码图片
76.     }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。