使用Node.js渲染opmised图像并使用sharp或canvas表示

我正在努力使用节点和使用sharp表达的优化配置来渲染图像。

我设法使用Jimp创建一个上传方法，转换宽度大于2000px且大于2mb文件大小的图像，并且工作正常，我遇到了几十个同样做的图书馆Jimp在我内置的内存中效率更高。

基本上我在我的液体模板引擎中有这样的：

<img src="{{i.images[0].path}}" alt="{{i.name}}">

我想创建一个路由器，使用images数组从MongoDB / projects / project路径读取图像，并将图像传递回渲染优化并按照配置中的说明调整大小，我想进一步配置此方法也许是一个中间件，可以在网站上全局工作，带有查询参数的图像可以按需渲染，还可以通过设备检测进行增强，以获得更好的性能下载：

const request = require('request');
const fs = require("fs");
const path = require("path");
const sharp = require('sharp');

module.exports = (req, res, next) => {

    request(process.env.REQUEST_PATH + "/projects?projectType=Refurbishment%20and%20Extensions", (err, response, body) => {
        if (err) {
            console.log(err);
        } else {

            const contentData = JSON.parse(body);

            contentData.projects.forEach((value, key) => {
                if (value.images[0].path.length > 0) {
                    const readStream = fs.createReadStream(path.resolve("./" + value.images[0].path));
                    //const getBuffer = Buffer.from(path.resolve("./" + value.images[0].path));
                    const trasnform = sharp(readStream).resize(200, 200, {
                        fit: "contain"
                    }).jpeg({
                        quality: 20
                    }).toBuffer((err, data, info) => {
                        if (err) {
                            console.log(err)
                        } else {
                            console.log("BUFFERED RESIZED", info);
                            //console.log("BUFFER", data);
                        }
                    });
                    console.log(trasnform); //nothing working
                    readStream.pipe(trasnform).pipe(res);
                }
            });

            const data = {
                name: "Refurbishment and Extensions Projects",
                content: contentData
            };

            res.render('./refurbishment-and-extensions-projects', {
                page: data
            });

        }
    });

}

在一些尝试中，它返回夏普的信息，图像转换为缓冲区，我不知道为什么，但现在我收到错误[错误：输入文件丢失]但是有一个缓冲区要读！

目前我并不挑剔解决方案但是对于一些性能测试sharp.js或canvas.js会很好用，请给我一些想法。

由于夏普的洛弗尔创造者，问题解决了here。

为了渲染具有锐利的图像并将其正确地传递给响应，您只能通过变换器，在这种情况下夏普及其可配置的功能，看起来我试图将图像再次传递给变换器，这会返回错误意外的数据在可写流上

我对此代码进行了各种更改，并选择创建一个中间件来处理我的应用程序。

我使用的最终代码如下：

const express = require("express");
const router = express.Router();
const fs = require("fs");
const path = require("path");
const Sharp = require('sharp');

router.get('/:imageName', (req, res, next) => {

    const imagePath = "./" + req._parsedOriginalUrl.pathname; //req.originalUrl or req._parsedOriginalUrl.pathname

    if (req.query.format != null) {

        if (fs.existsSync(imagePath)) {

            const format = req.query.format ? req.query.format : "webp";
            const width = req.query.width ? parseInt(req.query.width) : null;
            const height = req.query.height ? parseInt(req.query.height) : null;
            const crop = req.query.crop ?  req.query.crop : "cover";

            const stream = fs.createReadStream(imagePath);

            const transform = Sharp().resize(width, height, {
                fit: crop
            }).toFormat(format, {
                quality: 85
            });

            res.set('Content-Type', `image/${format}`);
            stream.pipe(transform).pipe(res);

            return stream;

        }//ensuring the file path is correct
    }
    next();
});

module.exports = router;

如果你来解决这个问题，你需要了解更多关于Node Filesystem，Streams和管道功能的信息，以便他们完全理解你在做什么。 ;-)