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 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统，原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测