带有下载图片按钮的灯箱

Question

I'm trying to add a "download image" button to my lightbox. Therefore I'm going to add a simple button to this lightbox: http://lokeshdhakar.com/projects/lightbox2/

I already tried the HTML5 download attribute but it's not suitable because it's not browser compatible.

Right click -> "save as..." is also not a solution, because the controls of the lightbox are on top of the image.

Is there a simple cross browser compatible solution to add a download button to the lightbox? I've also tried to use Blob or BlobBuilder but wasn't successful. Is this the right approach?

Edit:

I've found a working solution here: https://stackoverflow.com/a/833024/1301058

<FilesMatch "\.jpg$">
<IfModule mod_headers.c>
Header set Content-Disposition "attachment"
# for older browsers
Header set Content-Type "application/octet-stream"
</IfModule>
</FilesMatch>

But the problem is, that all images are transferred with MIME type application/octet-stream and I receive warnings for that.

How can I set the mimetype on click? I tried to add a parameter to the file path and the FilesMatch regex like:

<FilesMatch "\.jpg\?1$">

But that doesn't work.

Answer 1

add button that calls .php file with code like this.

<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');

// The PDF source is in original.pdf
readfile('original.pdf');
?>