title: How to force an image to be downloaded?
body: <p>I hava a dynamically generated image on my page like so:</p>
  
  <pre><code>&lt;img id="my_image" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEA/gD+AAD/etc............" /&gt;
  </code></pre>
  
  <p>Instead of telling my users to right click on the image and hit save I want to expose a download link which when clicked will prompt the image to be downloaded. How to achieve this?</p>
  
  <p>Initially my attempt with thus in js:</p>
  
  <pre><code>var path = $('#my_image').attr('src');
  window.open('./download.php?file=' + path);
  </code></pre>
  
  <p>and in download.php:</p>
  
  <pre><code>&lt;?php
      header('Content-Description: File Transfer');
      header("Content-type: application/octet-stream");
      header("Content-disposition: attachment; filename= " . $_GET['file'] . "");
  ?&gt;
  
  &lt;img src="&lt;?= $_GET['file'] ?&gt;" /&gt;
  </code></pre>
  
  <p>But problem is, Base64 url stirngs are so large it exceeds the GET request byte limit.</p>
  
  <p>I am open to a solution in either JavaScript or PHP.</p>