master

分支 (1)

管理

管理

master

poster
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二维码生成</title>
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
  <!-- 引如 jQuery 这个都懂把 不多说了  -->
  <script src="./js/jquery.min.js"></script>
  <!-- qrcode 的js文件 生成二维码需要 -->
  <script src="./js/qrcode.min.js"></script>

</head>

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

    <!-- canvas 标签 主要用来进行图形的绘制，海报的大小-->
    <!-- <canvas id="canvas" width="414px" height="736px";class="paper"></canvas> -->
    <canvas id="canvas" width="1242px" height="2208px" ;class="paper"></canvas>

  </div>
  <br>
  <!-- 点击这个按钮之后下载图片 -->
  <button id="download" class="button"><a href="javascript:void:;">下载图片</a>  </button>

  <script>
    let canvas = document.querySelector("#canvas");
    canvas.width = canvas.width * 1;
    canvas.height = canvas.height * 1;
    canvas.style.background = "#fff";
    //先为画布填充底色，否则生成的图片背景是透明的
    var cxt = canvas.getContext("2d");
    cxt.fillStyle = "#ffffff";
    cxt.fillRect(0, 0, 1242, 2208);

    let qr = document.getElementById("qrcode");
    let ctx = canvas.getContext("2d");
    let img = new Image();

    // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
    img.src = "./images/bg.png";  //海报背景图路径
    img.onload = function () {
      ctx.drawImage(img, 0, 0, 414, 436); //海报背景图大小
      ctx.drawImage(img, 0, 0, 1242, 1308); //海报背景图大小
      // 对二维码进行初始化
      let qrcode = new QRCode(qr, {
        width: 300,
        height: 300,
        colorDark: "#000000",
        colorLight: "#ffffff",
      });
      // 为二维码设置内容
      qrcode.makeCode("https://lovebug.cn");
      // 我们的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, 157, 446, 100, 100);
        ctx.drawImage(shareQr, 471, 1400, 300, 300);
      };

      // 第三张图片,可以是海报的logo
      let logo = new Image();
      // 设置base64编码格式值
      logo.src = "./images/logo.png";
      logo.onload = function () {
        // 绘制图像  就是绘制二维码到我们自己写的canvas中去
        //参数分别为：（X坐标，Y坐标，图片的宽，图片的高）
        // ctx.drawImage(logo, 182, 560, 53, 57);
        ctx.drawImage(logo, 546, 1740, 159, 171);
      };

      // 在位置 208 创建透明线,s是为了让文字居中对齐
      ctx.strokeStyle = "transparent";
      // ctx.moveTo(207, 620);
      // ctx.lineTo(207, 670);
      ctx.moveTo(621, 1960);
      ctx.lineTo(621, 2110);
      ctx.stroke();

      // 绘制字体
      ctx.font = "1rem Helvetica Neue";
      ctx.textAlign = "center",
      // ctx.fillStyle = "#3f3f3f";
      ctx.fillStyle = "#ccc";
      //参数：填充文字，X坐标，Y坐标
      // ctx.fillText("长按屏幕即可扫描二维码", 207, 650);
      ctx.fillText("长按屏幕即可扫描二维码", 621, 2050);
    };

    // 下载
    document.getElementById("download").onclick = function () {
      let a = document.createElement("a");
      // 设置地址
      a.href = canvas.toDataURL("image/png", 1);
      // 设置下载海报文件名
      a.download = "海报合成图";
      // 触发点击事件
      a.click();
    }

  </script>
</body>

</html>