Question

我正在制作一个node.js应用程序，该应用程序将主要用于从Web下载图像。我创建了可以成功下载图像的功能。我想让该功能还可以在下载图像时显示图像的实时预览，而不会影响下载速度。当下载到html画布或img时，是否可以“点击管道”并绘制图像？我正在使用电子，所以我正在寻找基于铬/node.js的解决方案。

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

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

我对html画布也不是特别熟悉，并且无法测试这些想法，因为我不知道如何将图像传递到画布或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网址进行显示。

节点JS：预览下载图像*

1 个答案: