qq_47663524 2023-03-22 22:36 采纳率: 100%
浏览 58
已结题

请问该怎么做才能将文字说明和二维码一起作为png图片一起下载

请问该怎么做才能将文字说明和二维码一起作为png图片一起下载？在二维码中添加文字又会被二维码遮挡调整文字距离后超过二维码距离又不显示文字
在前端页面的显示

img


作为图片下载后的图片样式

img

<!DOCTYPE html>
<html lang="en">
<head>
  <title>工位信息填报</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/QRcode.css">
</head>
<body>
  
</body>
</html>
<?php
    // 连接MySQL数据库
    $con=mysqli_connect("localhost","root","zsc%1234","textplain");
    if (!$con) {
      echo "连接数据库失败";
    }
    // 准备查询语句
    $sql = "SELECT * FROM station";
    // 执行查询语句
    $result = mysqli_query($con, $sql);
    // 获取查询结果
    $employee_list = mysqli_fetch_all($result, MYSQLI_ASSOC);
    // 输出JSON格式的员工列表
    //echo json_encode($employee_list);
    // 循环获取员工信息并生成二维码
    foreach ($employee_list as $employee) {
      // 构建二维码字符串
      if($employee['userName']&&$employee['workOrder']){
          $qr_url="http://localhost/myWEB/stationManagementSystem/html/getinformation.php?statioNum=".urlencode($employee['statioNum'])."&bulid=".urlencode($employee['bulid'])."&floor=".urlencode($employee['floor'])."&userName=".urlencode($employee['userName'])."&workOrder=".urlencode($employee['workOrder']);
      }else{
          $qr_url="http://localhost/myWEB/stationManagementSystem/html/getinformation.php?statioNum=".urlencode($employee['statioNum'])."&bulid=".urlencode($employee['bulid'])."&floor=".urlencode($employee['floor']);
      }
      // 输出二维码容器
      echo '
';
      // 输出二维码图片和工位位置的文字说明
      echo '
$employee['statioNum'] . '">
';
      echo '
' . $employee['statioNum'] . '
';
      // 引入 QRCodejs2 和 FileSaver.js
      echo '<script src="../node_modules/qrcodejs2/qrcode.min.js"></script>';
      echo '<script src="../js/FileSaver.js-master/dist/FileSaver.min.js"></script>';
      // 生成二维码并保存为文件
      echo '<script>
      var size = 256; // 二维码大小
      var qrcode = new QRCode("qrcode-' . $employee['statioNum'] . '", {
          text: "' . $qr_url . '",
          width: size,
          height: size,
          colorDark : "#000000",
          colorLight : "#ffffff",
          correctLevel : QRCode.CorrectLevel.H
      });
      // 绘制文字
      var canvas = document.getElementById("qrcode-' . $employee['statioNum'] . '").getElementsByTagName("canvas")[0];
      var ctx = canvas.getContext("2d");
      ctx.font = "14px Arial";
      ctx.fillStyle = "#FF0000";
      ctx.textAlign = "center";
      ctx.fillText("' . $employee['statioNum'] . '", size/2, size);
      // 保存为文件
      canvas.toBlob(function(blob){saveAs(blob,"'.$employee['statioNum'].'.png");});
      </script>';
      echo '
';
  }
    // 关闭数据库连接
    mysqli_close($con);
?>
  • 写回答

5条回答 默认 最新

  • 阳光宅男xxb 2023-03-23 08:43
    关注

    如果你要实现二维码加文字说明转为图片的话，使用canvas里绘画文字的方式不好实现的。Github上有一个叫html2canvas的库，它可以将一个div绘画成canvas，因此你可以使用qrcode、html2canvas 进行了封装，将二维码和绘制为canvas的div整合为一个canvas。
    关键代码：

    /**
        * 将两个canvas合并在一起
        * 
        * @param {Object} dom canvas要添加的dom对象
        * @param {Object} canvas1 第一个canvas
        * @param {Object} canvas2 第二个canvas
        * @param {Number} padding 图片的padding，默认20
        * @return {String} 返回base64字符串
        *  
        */
        function concatCanvas(dom,canvas1,canvas2,padding){
            var c1h = canvas1.height,
                c1w = canvas1.width,

                c2h = Number(canvas2.style.height.slice(0,-2));
                c2w = Number(canvas2.style.width.slice(0,-2));
                canvas = document.createElement("canvas");
                padding = padding || 20 ;
            /** 根据二维码、文字两个canvas，再加上padding计算出新的canvas的宽度和高度 **/
            canvas.height = c1h + c2h + 2.5 * padding ;
            canvas.width = Math.max(c1w,c2w) + 2 * padding ;
            /** end **/
            dom.appendChild(canvas);
            /** 将canvas画上白色背景 **/
            context = canvas.getContext("2d");
            context.fillStyle ="white";
            context.fillRect(0,0,canvas.width,canvas.height);
            /** end **/
            /** 将二维码、文字两个canvas绘画到一个canvas里 **/
            context.drawImage(canvas1, padding, padding, c1w ,c1h);
            context.drawImage(canvas2, padding, 1.5 * padding+c1h, c2w ,c2h);
            /** end **/
            /** 返回base64,用于注入到a标签里以便下载 **/
            return canvas.toDataURL('image/jpeg',1);
            /** end **/
        }

    详细的代码，建议您看下这个资料：https://juejin.cn/post/6844903556265295880

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 3月31日
  • 已采纳回答 3月23日
  • 创建了问题 3月22日

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了