javascript - Node JS : Preview downloading images*

Question

我正在制作一个主要用于从网络下载图像的 node.js 应用程序。我已经创建了这个成功下载图像的功能。我想让该功能在不影响下载速度的情况下在下载图像时也显示图像的实时预览。是否可以“点击管道”并在下载到 html Canvas 或 img 时绘制图像？我正在使用 electron，所以我正在寻找基于 chromium/node.js 的解决方案。

编辑: 我还发现你可以 chain pipes (r.pipe(file).pipe(canvas);) 但我不确定这是否会先下载文件然后显示在 Canvas 上，或者是否会将它们更新为文件下载。

我还考虑过根据请求创建两个单独的管道 (var r = request(url); r.pipe(file); r.pipe(canvas);)，但我我不确定这是否会尝试下载图像两次。

我也不是特别熟悉 html Canvas ，也无法测试这些想法，因为我不知道如何将图像传输到 Canvas 或 img 元素以在应用程序中显示。

const fs = require('fs-extra');
downloadFile(url, filename) {
    return new Promise(resolve => {
        var path = filename.substring(0, filename.lastIndexOf('\\'));
        if (!fs.existsSync(path)) fs.ensureDirSync(path);
            var file = fs.createWriteStream(filename);
            var r = request(url).pipe(file);
            // How would also pipe this to a canvas or img element?
            r.on('error', function(err) { console.log(err); throw new Error('Error downloading file') });
            r.on('finish', function() { file.close(); resolve('done'); });         
    });
}

Answer 1

我最后问了另一个类似的问题，为这个问题提供了答案。结果是 solution是将图像通过管道传输到内存中，使用 base64 对其进行编码并使用 data:image url 显示它。