如何强制下载图像？

Question

I hava a dynamically generated image on my page like so:

<img id="my_image" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEA/gD+AAD/etc............" />

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?

Initially my attempt with thus in js:

var path = $('#my_image').attr('src');
window.open('./download.php?file=' + path);

and in download.php:

<?php
    header('Content-Description: File Transfer');
    header("Content-type: application/octet-stream");
    header("Content-disposition: attachment; filename= " . $_GET['file'] . "");
?>

<img src="<?= $_GET['file'] ?>" />

But problem is, Base64 url stirngs are so large it exceeds the GET request byte limit.

I am open to a solution in either JavaScript or PHP.

Answer 1

Turns out one of the other questions did have the answer:

Browser/HTML Force download of image from src="data:image/jpeg;base64..."

I am doing it strictly on the client sde like so:

$('a#download_image').on('click', function() {
    var url = $('#my_image').attr('src').replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    location.href = url;
});