Рендеринг оптимизированных изображений с Node.js и выразить с резким или холст - PullRequest
Новая
       10

Рендеринг оптимизированных изображений с Node.js и выразить с резким или холст

0 голосов
/ 11 февраля 2019

Я изо всех сил пытаюсь получить изображения с оптимизированной конфигурацией, используя узел и выражать с sharp .

Мне удалось создать метод загрузки с использованием Jimp, который конвертирует изображения шириной более 2000px иразмер файла больше 2 Мб, и он работает нормально, я натолкнулся на десятки библиотек, которые делают то же самое, Jimp более эффективен в памяти для того, что я построил.

В основном, у меня есть в моем жидкостном шаблонизаторе, как это: 

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

Я хотел бы создать маршрутизатор, который считывает изображения из маршрута 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 с изображением конвЯ не уверен, почему, но теперь я получаю сообщение об ошибке [Ошибка: входной файл отсутствует], но есть буфер для чтения!

В данный момент я не разборчив в решении, но в отношении некоторых характеристикtest sharp.js или canvas.js было бы неплохо использовать, пожалуйста, дайте мне некоторое представление об этом.

1 Ответ

0 голосов
/ 18 февраля 2019

Проблема решена здесь благодаря Ловеллу, создателю Sharp.

Чтобы визуализировать изображение с резкостью и правильно передать его в ответ, в этом случае необходимо только передать преобразователь Sharp иего настраиваемые функции, похоже, я пытался снова передать изображение в преобразователь, и это возвращает ошибку Неожиданные данные в записываемом потоке

Я сделал различные изменения в этом коде и выбралсоздать промежуточное программное обеспечение для обработки всего моего приложения.

Окончательный код, который я использовал, выглядит следующим образом: 

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Файловая система, потоки и канал работают так, как они работают, чтобы полностью понять, что вы делаете.; -)

...