我在客户端生成一张图片，然后通过HTML显示它，代码如下：
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgM...."/>
我想提供下载生成图片的可能性。
如何实现浏览器打开文件保存对话框（或者像Chrome或Firefox一样将图片下载到下载文件夹中），使用户可以保存图片而不需要右键单击并选择“另存为”？
我更喜欢没有服务器交互的解决方案。因此，我知道如果我首先上传图片，然后再开始下载，这是可行的。
非常感谢！
只需将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!
};
你可以在a标签上使用download属性来...
<a href="data:image/jpeg;base64,/9j/4AAQSkZ..." download="filename.jpg"></a>
了解更多：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-download
download属性仍未在Safari和IE中得到支持。 - TheCarverURL，我该如何创建它？ - jofftiquez我猜需要在标签中添加一个图像标签，方法如下：
<a>
<img src="图片网址">
</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>
按照#15中解释的只使用a标签，最新版的Firefox和Chrome不能正常工作，但是将相同的图像数据放入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);
<a href="data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20image.png;base64,iVBORw0KGgoAAAA....">- Nippey