浏览器/HTML强制从src= " data:image/jpeg;base64…"

I am generating a image on client side and I display it with HTML like this:

我在客户端生成一个图像，然后用HTML这样显示:

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

I want to offer the possibility to download the generated Image.

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

How can I realize that the browser is opening a file save dialoge (or just download the image like chrome or firefox to the download folder would do) which allows the user to save the image without doing right click and save as on the image?

我怎么才能意识到浏览器正在打开一个文件保存对话框(或者只是把chrome或firefox之类的图片下载到下载文件夹中就可以了)，这样用户就可以保存图像，而无需像在图像上那样进行右键单击和保存?

I would prefer a solution without server interaction. So I am aware that it would be possible if I first upload the Image and then start the download.

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

Thanks a lot!

谢谢!

4 个解决方案

#1

Simply replace image/jpeg with application/octet-stream. The client would not recognise the URL as an inline-able resource, and prompt a download dialog.

只需用应用程序/八进制流替换图像/jpeg。客户端不会将URL识别为一行的资源，并提示下载对话框。

A simple JavaScript solution would be:

一个简单的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, 

Another method is to use a blob: URI:

另一种方法是使用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!
};

Relevant documentation

• atob
• atob
• Typed arrays
• 类型的数组
• URL.createObjectURL
• URL.createObjectURL
• Blob and BlobBuilder
• Blob和BlobBuilder

#2

you can use the download attribute on an a tag ...

您可以在a标记上使用download属性……

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

see more: https://developer.mozilla.org/en/HTML/element/a#attr-download

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

#3

I guess an img tag is needed as a child of an a tag, the following way:

我想img标签作为标签的子标签是必要的，如下:

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

or

或

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

Only using the a tag as explained in #15 didn't worked for me with the latest version of Firefox and Chrome, but putting the same image data in both a.href and img.src tags worked for me.

只有使用#15中所解释的标签，我才使用最新版本的Firefox和Chrome，但在两个版本中都使用相同的图像数据。href和img。src标签对我有用。

From JavaScript it could be generated like this:

从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);

#4

Take a look at FileSaver.js. It provides a handy saveAs function which takes care of most browser specific quirks.

看看FileSaver.js。它提供了一个方便的saveAs函数，可以处理大多数浏览器特有的问题。