Question

我正在做一个小项目, 我需要在其中生成 QR 代码和标识。我需要以 PNG 或 JPEG 格式保存生成的 QR 代码。如果我使用 svg 格式, 下面的代码运行正常。但我想要将文件保存为 PNG 或 JPEG 格式。我试图将 svg 替换为 png, 它保存文件, 但我无法打开它。当我尝试打开 PNG 文件时, 它会表示不支持的格式。

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

<head>
  <meta charset="UTF-8">
  <title>QR Code Styling</title>
  <script type="text/javascript" src="https://unpkg.com/[email protected]/lib/qr-code-styling.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
  <div id="canvas"></div>
  <script type="text/javascript">

    const qrCode = new QRCodeStyling({
      width: 300,
      height: 300,
      type: "svg",
      data: "https://www.facebook.com/",
      image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
      dotsOptions: {
        color: "#4267b2",
        type: "rounded"
      },
      backgroundOptions: {
        color: "#e9ebee",
      },
      imageOptions: {
        crossOrigin: "anonymous",
        margin: 20
      }
    });

    var svgBlob = qrCode.getRawData( jpeg );
    svgBlob.then(value => value.text().then(value => sendAjax(value)));

    function sendAjax(svgString) {
      $.ajax( 保存qr.php , {
         data : svgString, //canvas.innerHTML,
         type :  POST ,
         processData : false,
         contentType :  image/jpg 
      });
    }
    qrCode.append(document.getElementById("canvas"));
    // qrCode.download({ name: "qr", extension: "svg" });
  </script>
</body>

</html>

保存qr.php

<?php 
$svg = file_get_contents( php://input );
$myfile = fopen("testfile.jpeg", "w");
fwrite($myfile, $svg);

  
?>

Answer 1

您需要发送 blob, 而不是 value. text () :

    var svgBlob = qrCode.getRawData( jpeg );
    svgBlob.then(value => sendAjax(value));

这使得它的行为和电脑上的文件一样, 并想上传它。

Answer 2

请注意, JPEG 和 PNG 文件是二进格式文件, 而 SVG SVG 文件是普通文本格式文件

然而, 普通文本可以被视为二进制的子集, 所以当您将数据传送到 PHP 保存时, 您可以安全删除 value {gt; value. text (). then... , 实际上您也可以删除行内内容Type : 图像/xx, 用于此操作。

因此,以下各点都将是好的:

SVG SVG

var svgBlob = qrCode.getRawData( svg );
    svgBlob.then(value => sendAjax(value));

    function sendAjax(svgString) {
      $.ajax( saveqr.php , {
         data : svgString, //canvas.innerHTML,
         type :  POST ,
         processData : false,
      });
    }

JEPEG 联合联合评价小组

var svgBlob = qrCode.getRawData( jpeg );
    svgBlob.then(value => sendAjax(value));

    function sendAjax(svgString) {
      $.ajax( saveqr.php , {
         data : svgString, //canvas.innerHTML,
         type :  POST ,
         processData : false,
      });
    }

巴布亚新几内亚

var svgBlob = qrCode.getRawData( png );
    svgBlob.then(value => sendAjax(value));

    function sendAjax(svgString) {
      $.ajax( saveqr.php , {
         data : svgString, //canvas.innerHTML,
         type :  POST ,
         processData : false,
      });
    }

对于 PHP (saveqr.php), 请确保您选择的扩展名符合您想要保存的文件, 所以

用于 SVG SVG

....
$myfile = fopen("testfile1.svg", "w");
....

巴布亚新几内亚

....
$myfile = fopen("testfile1.png", "w");
....

JPG 用于 JPG

....
$myfile = fopen("testfile1.jpg", "w");
....

或

....
$myfile = fopen("testfile1.jpeg", "w");
....

友情链接