89

我在客户端生成一个图像，并用这样的 HTML 显示它：

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgM...."/>

我想提供下载生成的图像的可能性。

我如何才能意识到浏览器正在打开一个文件保存对话框（或者只是将 chrome 或 firefox 之类的图像下载到下载文件夹中），这允许用户在不右键单击并另存为图像的情况下保存图像？

我更喜欢没有服务器交互的解决方案。所以我知道如果我先上传图片然后开始下载是可能的。

非常感谢！

4

4 回答 4

123

只需替换image/jpeg为application/octet-stream. 客户端不会将该 URL 识别为可内联资源，并提示下载对话框。

一个简单的 JavaScript 解决方案是：

//var img = reference to image
var url = img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream');
window.open(url);
// Or perhaps: location.href = url;
// Or even setting the location of an <iframe> element,

另一种方法是使用blob:URI：

var img = document.images[0];
img.onclick = function() {
    // atob to base64_decode the data-URI
    var image_data = atob(img.src.split(',')[1]);
    // Use typed arrays to convert the binary data to a Blob
    var arraybuffer = new ArrayBuffer(image_data.length);
    var view = new Uint8Array(arraybuffer);
    for (var i=0; i<image_data.length; i++) {
        view[i] = image_data.charCodeAt(i) & 0xff;
    }
    try {
        // This is the recommended method:
        var blob = new Blob([arraybuffer], {type: 'application/octet-stream'});
    } catch (e) {
        // The BlobBuilder API has been deprecated in favour of Blob, but older
        // browsers don't know about the Blob constructor
        // IE10 also supports BlobBuilder, but since the `Blob` constructor
        //  also works, there's no need to add `MSBlobBuilder`.
        var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder);
        bb.append(arraybuffer);
        var blob = bb.getBlob('application/octet-stream'); // <-- Here's the Blob
    }

    // Use the URL object to create a temporary URL
    var url = (window.webkitURL || window.URL).createObjectURL(blob);
    location.href = url; // <-- Download!
};

相关文件

于 2012-05-06T20:26:07.597 回答
101

您可以在 a 标签上使用下载属性...

<a href="data:image/jpeg;base64,/9j/4AAQSkZ..." download="filename.jpg"></a>

查看更多：https ://developer.mozilla.org/en/HTML/element/a#attr-download

于 2012-06-13T23:24:45.307 回答
16

我猜需要一个img标签作为 a 标签的子标签，方法如下：

<a download="YourFileName.jpeg" href="data:image/jpeg;base64,iVBO...CYII=">
    <img src="data:image/jpeg;base64,iVBO...CYII="></img>
</a>

或者

<a download="YourFileName.jpeg" href="/path/to/OtherFile.jpg">
    <img src="/path/to/OtherFile.jpg"></img>
</a>

在最新版本的 Firefox 和 Chrome 中，仅使用 #15 中解释的a标签对我不起作用，但将相同的图像数据放在a.href和img.src标签中对我有用。

从 JavaScript 可以这样生成：

var data = canvas.toDataURL("image/jpeg");

var img = document.createElement('img');
img.src = data;

var a = document.createElement('a');
a.setAttribute("download", "YourFileName.jpeg");
a.setAttribute("href", data);
a.appendChild(img);

var w = open();
w.document.title = 'Export Image';
w.document.body.innerHTML = 'Left-click on the image to save it.';
w.document.body.appendChild(a);
于 2014-04-10T20:47:58.973 回答
5

看看FileSaver.js。它提供了一个方便的saveAs功能，可以处理大多数浏览器特定的怪癖。

于 2015-07-09T22:40:01.787 回答