如何强制下载一张图片？

Question

我在页面上有一个动态生成的图像，如下所示：

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

我希望您能够提供一个下载链接，而不是告诉用户右键单击图像并点击保存。当用户点击下载链接时，将提示下载该图像。如何实现这一目标？

最初我的尝试是使用以下js代码：

```javascript $('a.download').click(function(){ window.location.href = 'path/to/image.jpg'; }); ```

但是，这样做会导致图像在浏览器中打开而不是被下载。有什么更好的方法吗？

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

在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'] ?>" />

问题在于，Base64 URL字符串过大，超过了GET请求字节限制。

我可以考虑使用JavaScript或PHP解决方案。

- user967451

---

即使Base64字符串适合查询字符串，该PHP代码也不会按照您的预期执行。 - icktoofay

将src指向一个具有下载所需头文件等的php脚本。可以包含图片或使用file_get_contents()函数获取图片。 - user557846

可能是如何使jpg图像像pdf文件一样下载？的重复问题。希望这也能帮到你，兄弟 :) - Tats_innit

你是如何生成第一张内联图片的？ - Ja͢ck

@Jack HTML5 FileReader 用于将图像抓取到用户的浏览器中，通过 Canvas JavaScript 进行编辑。JS 插件生成 Base64 图像代码。 - user967451

Answer 1

在download.php中尝试以下操作：

<?php
    header('Content-Description: File Transfer');
    header("Content-type: application/octet-stream");
    header("Content-disposition: attachment; filename= Image.jpg");
    exit(base64_decode($_POST['data'])); //url length is limited, use post instead
?>

并使用此表单：

<form method="post" action="./download.php">
  <input type="hidden" name="data" value="/9j/4AAQSkZJRgABAgEA/gD+AAD/etc............" />
  <a href="#" onclick="this.parentNode.submit();return false;">Download</a>
</form>

就像Dagon所说，这不是最好的方法，因为提交表单就像上传整个图像一样。

- unloco

---

将整个图像从服务器发布到客户端，然后再发送回服务器，最后再返回客户端似乎有点毫无意义。 - user557846

@UnLoCo，这确实会提示下载图像。但是当下载的图像被打开时，它是空的（长度为0字节）。关于性能问题：图像从未在服务器上。我正在使用HTML5 FileReader API在客户端浏览器上加载图像，并使用Canvas JavaScript允许他们编辑它。JavaScript生成Base64图像。因此，除了发布长字符串之外，可能没有性能问题。下载仍应从客户端自己的浏览器提供服务（正确吗？） - user967451

它对我起作用了，我下载了一个可查看的图像。确保在用户单击链接并提交表单之前填写数据字段！ - unloco

Answer 2

原来另一个问题确实有答案： 浏览器/HTML 强制下载来自 src="data:image/jpeg;base64..." 的图像 我是在客户端严格执行它的，就像这样：

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

- user967451