強制下載PHP生成的QR碼圖片

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;