Question

我正在使用Endroid\QrCode使用PHP生成QR码。这一切都很好，但无论如何我都会发布代码。我正在尝试向我的页面添加一个下载按钮，使其更加用户友好，而不是右键单击图像并从上下文菜单中选择另存为。但是，不是下载图像（.png）文件，而是将当前页面下载为.htm文件。是否有一种不同的方式必须使用PHP生成的图像而不仅仅是原始的png图像？

PHP：

<?php require_once '../control.php';
require_once '../vendor/autoload.php';

use Endroid\QrCode\QrCode;

$qrCode = new QrCode();


if($_GET['url'] != ''){
    $qrCode->setText($_GET['url']);
} else {
    $qrCode->setText(SITEHTMLROOT);
}
if($_GET['size'] != ''){
    $qrCode->setSize($_GET['size']);
} else {
    $qrCode->setSize(200);
}
if($_GET['padding'] != ''){
    $qrCode->setPadding($_GET['padding']);
} else {
    $qrCode->setPadding(10);
}
if($_GET['label'] != ''){
    $qrCode->setLabel($_GET['label']);
}
if($_GET['text_size'] != ''){
    $qrCode->setLabelFontSize($_GET['text_size']);
} else {
    $qrCode->setLabelFontSize(16);
}

$qrCode
    ->setErrorCorrection('high')
    ->setForegroundColor(array('r' => 0, 'g' => 0, 'b' => 0, 'a' => 0))
    ->setBackgroundColor(array('r' => 255, 'g' => 255, 'b' => 255, 'a' => 0))
    ->render()
;
?>

使用Javascript：

var getQRCode = function () {
  var url = $('#site_url').val();
  var size = $('#qr_size').val();
  var padding = $('#qr_padding').val();
  var label = $('#qr_label').val();
  var text_size = $('#qr_text_size').val();
  var QRcode = $('#final_QRCode');
  var get = '?url=' + url +'&&size=' + size + '&&padding=' + padding + '&&label=' + 
    label + '&&text_size=' + text_size;
  QRcode.attr('src', htmlroot + 'cgi/qrcode.php' + get);
  $('#qr_code_download').attr('src',  htmlroot + 'cgi/qrcode.php' + get);
};

HTML按钮和图片：

<label>Your QR Code</label>
<div class="row"><img src="" id="final_QRCode" /></div>
<a href="#" id="qr_code_download" download="My QR Code">
  <div class="button special fit">Download This QR Code</div></a>

图片网址格式：

http://www.example.com/qrcode.php?url=myurl.html&size=300&padding=10&label=&text_size=16

Answer 1

要确保提取正确的URL，请检查浏览器的开发人员工具网络选项卡。我建议对你的javascript代码进行以下修改应该有所帮助 - 添加CDATA括号意味着你可以使用里面的任何字符而不破坏HTML验证，并且URL应该有单个＆符号来分隔参数而不是双符号。

<script type="text/javascript"><![CDATA[
var getQRCode = function () {
  var url = $('#site_url').val();
  var size = $('#qr_size').val();
  var padding = $('#qr_padding').val();
  var label = $('#qr_label').val();
  var text_size = $('#qr_text_size').val();
  var QRcode = $('#final_QRCode');
  var get = '?url=' + url +'&size=' + size + '&padding=' + padding + '&label=' + label + 
    '&text_size=' + text_size;
  QRcode.attr('src', htmlroot + 'cgi/qrcode.php' + get);
  $('#qr_code_download').attr('href',  htmlroot + 'cgi/qrcode.php' + get);
};
]]></script>

此外，可能值得在PHP脚本中添加一些HTTP标头，以确保浏览器在QR码呈现语句之前了解其接收的内容类型，然后故意省略关闭的PHP标记，因为这样可以允许尾随空格以干扰输出：

<?php
header( 'Content-type: image/png' );
$qrCode->setErrorCorrection('high')
  ->setForegroundColor(array('r' => 0, 'g' => 0, 'b' => 0, 'a' => 0))
  ->setBackgroundColor(array('r' => 255, 'g' => 255, 'b' => 255, 'a' => 0))
  ->render();
exit;

强制下载PHP生成的二维码图像

1 个答案: