保存图像Blob

Question

我有一个允许我传递文件内容,名称和类型的功能,该功能将自动保存.它适用于基于文本的文档,但现在我正在尝试保存其他文件,如图像文件.沿着这条线的某个地方,它被破坏了,无法正常工作.

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

Answer 1

FileSaver.js一个非常强大的js脚本，用于保存任何类型的Blob文件。

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

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

Answer 2

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

工作示例（使用 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

工作示例 2（使用 blob）（Fiddle）：

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

我建议FileSaver.js将 blob 保存为文件。

有用的链接：

XmlHttpRequest 标准

XmlHttpRequest 标准（responseType 属性）

MDN 文档 (XmlHttpRequest)

MDN 文档（ArrayBuffer）