Javascript 保存图像 Blob

Saving an Image Blob

提问by GFL

I have a function that allows me to pass file content, name, and type and the function will automatically save it. It works great for text based documents, but now I'm trying to have it save other files, like an image file. Somewhere along the line its getting corrupted and isn't working.

我有一个允许我传递文件内容、名称和类型的函数，该函数会自动保存它。它适用于基于文本的文档，但现在我试图让它保存其他文件，如图像文件。沿着这条线的某个地方它被损坏了并且无法正常工作。

function write(text, filename, mime){
    var file = new Blob([text], {type:mime}), a = document.createElement('a');

    // Download in IE
    if(window.navigator.msSaveBlob) window.navigator.msSaveBlob(file, filename);

    // Download in compliant browsers
    else{
        var url = URL.createObjectURL(file);
        a.href = url, a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function(){
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);}, 0);}}

write('Plain text', 'demo.txt', 'text/plain');

write(atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAAdCAIAAADkY5E+AAAAD0lEQVR42mNg0AthoDMGAE1BDruZMRqXAAAAAElFTkSuQmCC'), 'demo.png', 'image/png');

采纳答案by m.nachury

FileSaver.js a very powerfull js script to save any type of blob file.

FileSaver.js一个非常强大的 js 脚本来保存任何类型的 blob 文件。

Import it then use it like that:

导入它然后像这样使用它：

saveAs(new Blob([file], {type:mime}),filename);

回答by Cheloide

Are you fetching the file using ajax? if so, you should set XmlHttpRequest.responseTypeto 'arraybuffer'or 'blob'(default is ''and that will not work with binaries or blob data).

您是否使用ajax获取文件？如果是这样，您应该设置 XmlHttpRequest.responseType为'arraybuffer'或'blob'（默认为''并且不适用于二进制文件或 blob 数据）。

Working example (using arraybuffer) (Fiddle):

工作示例（使用 arraybuffer）（Fiddle）：

var xhr = new XMLHttpRequest();

var url = 'https://upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg';

xhr.responseType = 'arraybuffer'; //Set the response type to arraybuffer so xhr.response returns ArrayBuffer
xhr.open('GET', url , true);

xhr.onreadystatechange = function () {
    if (xhr.readyState == xhr.DONE) {
        //When request is done
        //xhr.response will be an ArrayBuffer
        var file = new Blob([xhr.response], {type:'image/jpeg'});
        saveAs(file, 'image.jpeg');
    }
};

xhr.send(); //Request is sent

Working example 2 (using blob) (Fiddle):

工作示例 2（使用 blob）（小提琴）：

var xhr = new XMLHttpRequest();

var url = 'https://upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg';

xhr.responseType = 'blob'; //Set the response type to blob so xhr.response returns a blob
xhr.open('GET', url , true);

xhr.onreadystatechange = function () {
    if (xhr.readyState == xhr.DONE) {
        //When request is done
        //xhr.response will be a Blob ready to save
        saveAs(xhr.response, 'image.jpeg');
    }
};

xhr.send(); //Request is sent

I recommend FileSaver.jsto save the blobs as files.

我推荐FileSaver.js将 blob 保存为文件。

Useful links:

有用的链接：

XmlHttpRequest Standard

XmlHttpRequest 标准

XmlHttpRequest Standard (responseType attribute)

XmlHttpRequest 标准（responseType 属性）

MDN Docs (XmlHttpRequest)

MDN 文档 (XmlHttpRequest)

MDN Docs (ArrayBuffer)

MDN 文档 (ArrayBuffer)