JavaScript实现海报二维码生成+下载自定义名称[精选]

程序员文章站 2022-07-13 09:19:53

...

观看本章节分享的内容建议学习过canvas

本次DEMO效果图
JavaScript实现海报二维码生成+下载自定义名称[精选]
资料获取地址
链接：https://pan.baidu.com/s/1g13Lee61gy1jXmTxWOQkWQ
提取码：j1d7

前言

现在非常多的网站都会生成一些海报和二维码做一些特殊的业务例如邀请分享等今天我们来看Js中如何使用qrcode+canvas实现海报的生成和下载

其实还是一张背景图加上一张二维码绘制到了同一个canvas中但是需要注意的是 canvas 中先被加载的图像会被先绘制后加载的后绘制因此图片的显示顺序需要我们自己控制一般来说小的图片加载的快大的则慢在这里我们通过在回调中绘制二维码才得以不会被覆盖掉

我们先来看使用把

使用

配图这张图可以是你们的画报哦我这里随便搞了一张
JavaScript实现海报二维码生成+下载自定义名称[精选]
在就是我们的二维码的生成位置需要我们自己调整哦

具体的使用我们可以看注释哦都非常的详细一行一行解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!-- 引包 这个都懂把 不多说了  -->
    <script src="jquery.min.js"></script>
    
    <!-- qrcode 的js文件 生成二维码需要 -->
    <script src="qrcode.min.js"></script>
    
</head>
<body>

<!-- 这个元素用来承载生成的二维码 不显示 -->
<div id="qrcode" style="display: none"></div>

<!-- 点击这个按钮之后下载图片 -->
<button id="download"> 下载图片 </button>

<!-- canvas 标签 主要用来进行图形的绘制-->
<canvas id="canvas" width="500" height="300"></canvas>

<script>

              let canvas = document.querySelector("#canvas");
              canvas.width = canvas.width * 1;
              canvas.height = canvas.height * 1;
              let qr = document.getElementById("qrcode");
              let ctx = canvas.getContext("2d");
              let img = new Image();
              	  // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
                  img.src = "./a.jpg";
                  img.onload=function () {
                      ctx.drawImage(img,0,0,500,300);
                      // 对二维码进行初始化
                      let qrcode = new QRCode(qr, {
                          width : 100,
                          height : 100,
                          colorDark : "#000000",
                          colorLight : "#ffffff",
                      });
					  // 为二维码设置内容	
                      qrcode.makeCode("http://liwenxiang.top");
					  // 我们的qrcode生成二维码之后也会有一个canvas对象我们获取到这个元素
                      let base64 = qr.firstChild.toDataURL("image/png",1);
                      // 这里的image只能在onload里面绘制 在外面就会被覆盖了 因为优先加载完毕就会优先绘制 然后就被之后绘制的海报背景遮挡了
                      let shareQr = new Image();
                      // 设置base64编码格式值
                      shareQr.src = base64;
                      shareQr.onload=function(){
                          // 绘制图像  就是绘制二维码到我们自己写的canvas中去
                          ctx.drawImage(shareQr,350,30,100,100);
                      };
                      // 绘制字体
                      ctx.font="14px 楷体";
                      ctx.fillText("liwenxiang.top",350,150);
                  };
			
 			 // 下载
			document.getElementById("download").onclick=function () {
			       let a = document.createElement("a");
			       // 设置地址
			       a.href = canvas.toDataURL("image/png",1);
			       // 设置下载名称
			       a.download = "李文祥博客";
			       // 触发点击事件
			       a.click();
			}


</script>

</body>
</html>

整体的DEMO效果就是

JavaScript实现海报二维码生成+下载自定义名称[精选]

结语

每天进步一点点加油啦~