Force Download of PHP generated QR code Image
<p>I am using <a href="https://packagist.org/packages/endroid/qrcode-bundle" rel="nofollow">Endroid\QrCode</a> 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 <em>Save As</em> 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?</p>

<p>PHP:</p>

<pre><code>&lt;?php require_once '../control.php';
require_once '../vendor/autoload.php';

use Endroid\QrCode\QrCode;

$qrCode = new QrCode();


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

$qrCode
    -&gt;setErrorCorrection('high')
    -&gt;setForegroundColor(array('r' =&gt; 0, 'g' =&gt; 0, 'b' =&gt; 0, 'a' =&gt; 0))
    -&gt;setBackgroundColor(array('r' =&gt; 255, 'g' =&gt; 255, 'b' =&gt; 255, 'a' =&gt; 0))
    -&gt;render()
;
?&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>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 +'&amp;&amp;size=' + size + '&amp;&amp;padding=' + padding + '&amp;&amp;label=' + 
    label + '&amp;&amp;text_size=' + text_size;
  QRcode.attr('src', htmlroot + 'cgi/qrcode.php' + get);
  $('#qr_code_download').attr('src',  htmlroot + 'cgi/qrcode.php' + get);
};
</code></pre>

<p>HTML button and image:</p>

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

<p>Image URL format:</p>

<pre><code>http://www.example.com/qrcode.php?url=myurl.html&amp;size=300&amp;padding=10&amp;label=&amp;text_size=16
</code></pre>