下载 API 返回的图像

Question

我正在使用运动雷达 api。我正在进行的 api 调用，returns 一个 png 图像。到现在我已经做到了。

    const apiCall = (url) => {
        return axios.get(url).then((data) => {
            if(data){
                return Promise.resolve(data);
            }
            else{
                return Promise.reject();
            }
        });
    }

    //all data in data.assetlist
    for(let i=0; i<data.assetlist.length; i++){
        let imageLink = data.assetlist[i].links[12].href;
        let url = `https://api.sportradar.us/nfl-images-p3/ap_premium${imageLink}?api_key=${api_key}`;
        apiCall(url).then((data) => {
            console.log(data);
            let blob = new Blob(data, {type: "image/png"}); // didn't compile with this line

        });
   }

以上代码运行良好，正在返回数据。但是数据是奇怪的字符，如果我理解正确的话，这是因为图像是一个 blob 类型并且我正在获取数据流。

我参考了here写了这行

let blob = new Blob(data, {type: "image/png"});

我没有尝试这个，因为我担心数据太大可能会导致我的系统（旧笔记本电脑）崩溃。如果我做对了，我想知道如何将这个 blob 文件作为 png 文件保存到我的系统中，如果没有，那么我想知道如何将这个数据流转换为图像并下载并保存在本地目录。

Answer 1

如果您获得的图像已经是一个 blob，您可以使用此库下载它： https://github.com/eligrey/FileSaver.js

let FileSaver = require('file-saver');
FileSaver.saveAs(blob, "my_image.png");

我觉得你不应该那么担心尺寸，直接买就好了。

Answer 2

经过大量研究，我找到了这个解决方案并且有效。

apiCall(url).then((response) => {
        response.data.pipe(fs.createWriteStream('test.jpg'));
    });

下载 API 返回的图像

Download the image returned by an API

javascript

api

rest

blob

axios