强制下载PHP生成的QR码图片

Question

I am using Endroid\\QrCode to generate a QR Code with PHP. This all works fine but I'll post the code anyway. I am trying to add a download button to my page to make it more user friendly than having to right-click the image and choose Save As from the context menu. But instead of downloading the image (.png) file it downloads the current page as a .htm file. Is there a different way this has to be done with the image being PHP generated and not just a raw png image?

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 button and image:

<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>

Image URL format:

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

Answer 1

To ensure the correct URL is being fetched check the browser's developer tools network tab. I would suggest the following modification to your javascript code should help - adding CDATA brackets means you can use any characters inside without breaking HTML validation, and URL's should have single ampersands to separate parameters not double ampersands.

<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>

In addition it may be worth adding some HTTP headers into your PHP script to ensure the browser understands the type of content it is receiving, just before the QR code rendering statements, and then deliberately omit the closing PHP tag as this can allow trailing whitespace to interfere with the output:

<?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;