将节点文件流图像传递给 HTML5 FileReader API

Question

我如何使用 Node FileSystem 打开一个文件，但将其发送到 FileReader API？

const myFile = "C:\Users\Me\Image.png";

fs.readFile(myFile, (error, data) => {
    const blob = new Blob(data);

    const fileReader = new FileReader();
    fileReader.readAsDataURL(blob);

    fileReader.addEventListener("load", () => {
        const image = new Image();
        image.src = fileReader.result;

        document.body.appendChild(image);
    });
});

此代码不会引发错误，但它不起作用。

Answer 1

感谢上面讨论的参与者，下面的代码是一个可行的解决方案。为了简洁起见，我故意省略了错误处理。

const nodeFileSystem = require("fs");

const filePath = "C:\path\to\image\file.png";

nodeFileSystem.readFile(filePath, (error, data) => {

    const blob = new Blob([data]);

    const fileReader = new FileReader();
    fileReader.readAsDataURL(blob);
    fileReader.addEventListener("load", fileReaderLoadHandler);
});

function fileReaderLoadHandler(event) {

    const fileReader = event.target;
    fileReader.removeEventListener("load", fileReaderLoadHandler);
    
    const image = new Image();
    image.src = fileReader.result;
    image.addEventListener("load", imageLoadHandler);
}

function imageLoadHandler(event) {

    const image = event.target;
    image.removeEventListener("load", imageLoadHandler);

    document.body.appendChild(image);
}

将节点文件流图像传递给 HTML5 FileReader API

Passing Node FileStream Image to HTML5 FileReader API

javascript

filereader

node.js

electron