如何强制下载图像？答案

【问题标题】：How to force an image to be downloaded?如何强制下载图像？
【发布时间】：2012-08-16 09:16:56
【问题描述】：

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

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

我不想告诉我的用户右键单击图像并点击保存，我想公开一个下载链接，单击该链接将提示下载图像。如何做到这一点？

最初我在 js 中的尝试：

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 的解决方案。

【问题讨论】：

即使 Base64 字符串确实适合查询字符串，PHP 代码也不会按照您的预期执行。
使 src 指向一个带有标题等的 php 脚本以供下载。包含图像或使用 file_get_contents() 获取图像。
How do I make a jpg image download like a pdf file does? 的可能重复项希望它也有帮助 bruv :)
你最初是如何生成内联图像的？
@Jack HTML5 FileReader 用于将图像抓取到用户的浏览器中，他/她所做的编辑是通过 Canvas JavaScript 完成的。 JS插件是生成Base64图像代码的。

标签： php javascript jquery base64

【解决方案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 所以这确实会提示下载图像。但是当打开下载的图像时，它是空的（长度为 0 字节）。重新解决性能问题：图像永远不会在服务器上。我正在使用 HTML5 FileReader API 将图像加载到客户端的浏览器和 Canvas JavaScript 以允许他们对其进行编辑。 JavaScript 生成 Base64 图像。因此，除了发布长字符串之外，也许没有性能问题。仍应从客户端自己的浏览器提供下载（正确吗？）
它对我有用，我下载了一个可视图像。确保在用户点击链接并提交表单之前填写数据字段！

【解决方案2】：

原来其他问题之一确实有答案：

Browser/HTML Force download of image from 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;
});

【讨论】：