Node.js: розмір зображення без ImageMagick

Я розробляю веб-додаток на Node.js (+ express 4), де користувачі можуть встановити своє зображення профілю, завантаживши його на сервер. Ми вже обмежуємо mimeype та max розмір файлу, тому користувач не може завантажувати більше 200 КБ зображень у форматі png або jpeg.

Проблема полягає в тому, що ми хотіли б зменшити розмір (на стороні сервера) роздільної здатності завантаженого зображення до 200x200, щоб покращити завантаження сторінки та заощадити місце на диску. Після деяких досліджень усі відповіді вказували на використання будь-якого модуля на основі ImageMagick або GraphicsMagick.

Однак установка ImageMagick / GraphicsMagick для простого зміни розміру зображення здається мені занадто надмірною, тож, чи є якесь інше рішення, крім цього, для Node.js?

Редагувати: Я прийняв прийняте рішення на різке, оскільки попереднє рішення (lwip) більше не підтримується. Дякуємо за всі Ваші відгуки!

Я б проголосував за різке :

sharp('input.jpg')
  .resize(200, 200)
  .toFile('ouput.jpg', function(err) {
    // output.jpg is a 200 pixels wide and 200 pixels high image
    // containing a scaled and cropped version of input.jpg
  });

Це швидко, як правило, в 6 разів швидше, ніж найшвидші прив'язки вузлів на основі imagemagick , і працює в дуже невеликій пам'яті, можливо, в 10 разів менше . різкі посилання на бібліотеку зображень libvips безпосередньо, немає обстрілу із зовнішньою програмою, а сама бібліотека швидше та ефективніше * magick при виконанні цього завдання. Він підтримує корисні речі, такі як введення та виведення потоку, буфера та файлової системи, управління кольором, прозорість, обіцянки, накладання, WebP, SVG тощо.

Починаючи з різкого значення 0.20, npm автоматично завантажує всі попередньо скомпільовані двійкові файли на більшості платформ, тому немає необхідності в node-gyp. Просто введіть:

npm install sharp

або:

yarn add sharp

І вперед.

Нещодавно я розпочав розробку модуля обробки зображень для NodeJS без будь-яких залежностей виконання ( прочитайте чому ). Це все ще на ранніх стадіях, але вже придатне для використання.

Те, про що ви просите, буде виконано наступним чином:

image.resize(200, 200, function(err, image){
    // encode resized image to jpeg and get a Buffer object
    image.toBuffer('jpg', function(err, buffer){
        // save buffer to disk / send over network / etc.
    });
});

Більше інформації в репозиторії Github модуля .

Погляньте на lwip: https://github.com/EyalAr/lwip

Дуже простий і простий у використанні

npm install lwip

а потім у коді вашого вузла,

// obtain an image object:
require('lwip').open('image.jpg', function(err, image){

  // check err...
  // define a batch of manipulations and save to disk as JPEG:
  image.batch()
    .scale(0.75)          // scale to 75%
    .rotate(45, 'white')  // rotate 45degs clockwise (white fill)
    .crop(200)            // crop a 200X200 square from center
    .blur(5)              // Gaussian blur with SD=5
    .writeFile('output.jpg', function(err){
      // check err...
      // done.
    });

});

Я успішно застосував це у своєму завантажувачі файлів, і це працює як шарм.

Існує хороша бібліотека для обробки зображень, повністю написана на JavaScript, без залежностей від інших бібліотек, Jimp. https://github.com/oliver-moran/jimp

Приклад використання:

var Jimp = require("jimp");

// open a file called "lenna.png"
Jimp.read("lenna.png", function (err, lenna) {
    if (err) throw err;
    lenna.resize(256, 256)            // resize
         .quality(60)                 // set JPEG quality
         .write("lena-small.jpg"); // save
});

Sharp нещодавно користується деякою популярністю, але це та сама ідея, що і * Магічні прив’язки.

Однак установка ImageMagick / GraphicsMagick для простого зміни розміру зображення здається мені занадто надмірною

Зміна розміру зображення - це все, але не просто. Формат JPEG є особливо складним, і існує кілька способів масштабування графіки з різною якістю результатів, лише деякі з них легко реалізувати. Для виконання цієї роботи існують бібліотеки обробки зображень, тому, якщо немає іншої причини, чому ви не можете їх встановити, перейдіть до цього.

Полотно в 2,3 рази швидше, ніж ImageMagic.

Ви можете спробувати порівняти модулі Node.js для обробки зображень - https://github.com/ivanoff/images-manipulation-performance

author's results:
 sharp.js : 9.501 img/sec; minFreeMem: 929Mb
 canvas.js : 8.246 img/sec; minFreeMem: 578Mb
 gm.js : 4.433 img/sec; minFreeMem: 791Mb
 gm-imagemagic.js : 3.654 img/sec; minFreeMem: 804Mb
 lwip.js : 1.203 img/sec; minFreeMem: 54Mb
 jimp.js : 0.445 img/sec; minFreeMem: 82Mb

Якщо вам не потрібно велике зображення, ви можете змінити його розмір на стороні клієнта перед завантаженням:

Читання файлів у JavaScript за допомогою файлових API

Змінення розміру на стороні клієнта за допомогою JavaScript перед завантаженням на сервер

Багато користувачів можуть мати хороше уявлення про себе зі смартфона, і багато з них мають розмір понад 200 кБ. Зауважте, що надані клієнтом дані не можна довіряти, тому перевірки на стороні сервера все ще застосовуються.

Я використовував lwip (як раніше пропонував arvind), але перейшов на png-crop . Здається, це працює трохи швидше для мене (Win 8.1 x64, Node v0.12.7). Код у репозиторії виглядає неймовірно легким, і в експлуатації він простий у використанні.

var pngcrop = require('png-crop');
var config = {left: 10, top: 100, height: 150, width: 150};
pngcrop.crop('cats.png','cats-cropped.png',config);

Звичайно, це буде робити лише файли PNG ...

Sharp працює дуже добре і простий у використанні з потоками, працює як шарм, але вам потрібно скомпілювати його з версією вузла, це є мінусом. Я використовував Sharp для обробки зображень із зображенням із сегмента AWS S3 і працював чудово, але мені довелося використовувати інший модуль. GM не працював у мене, але Jimp працював дуже добре!

Ви повинні звернути увагу на шлях написаного малюнка, це може привести до помилок, якщо ви почнете шлях з "/".

Ось як я використовував Jimp у nodeJS:

const imageUrl = `SOME_URL`;
let imgExported = 'EXPORTED_PIC.png';

Jimp.read(imageUrl)
    .then(image => {
        image   
            .resize(X, Y) 
            .write(`tmp/`+ imgExported, err => { 
                if(err) 
                    console.error('Write error: ', err);
                else { ... // don't forget to put a callback() } }

            });

Також стежте за порядком виконання, поставте зворотний дзвінок, щоб інші речі не відбувалися, коли ви цього не хочете. Спробував використати "await" для Jimp.read (), але це не справило роботу добре.

Ви можете зробити це за допомогою jimp (node_module)

Місцевий запис:

Jimp.read(path) // this can be url or local location
      .then(image=> {
          image
            .resize(size, Jimp.AUTO) // jimp.AUTO automatically sets the width so that the image doesnot looks odd
            .write('path-to-save');
      })
      .catch(err => {
        console.log(err);
      });

Завантажити на s3 або де завгодно.

Jimp.read(urls) // this can be url or local location
          .then(image=> {
              image
                .resize(size, Jimp.AUTO) // jimp.AUTO automatically sets the width so that the image doesnot looks odd
                .getBase64(Jimp.AUTO, (err, res) => {
                  const buf = new Buffer(
                    res.replace(/^data:image\/\w+;base64,/, ""),
                    "base64"
                  );
                  var data = {
                    Key: key,
                    Bucket: bucket,
                    Body: body,
                    ContentEncoding: "base64",
                    ContentType: "image/jpeg"
                  };
                  s3.putObject(data, function(err, data) {
                    if (err) {
                      throw err;
                    } else {
                      console.log("succesfully uploaded the image!");
                    }
                  });
                });
          })
          .catch(err => {
            console.log(err);
          });

Мені подобається бібліотека resize-img за її простоту.

const fs = require('fs');
const resizeImg = require('resize-img');

(async () => {
    const image = fs.readFileSync('unicorn.png');

    const newImage = await resizeImg(image, { width: 128, height: 128 });

    fs.writeFileSync('unicorn-128x128.png', newImage);
})();

Змінено розмір зображення за допомогою API Google Drive v3 . Цей метод рекомендується для Google Apps Script для вставки зображень у Google Таблиці.

Алгоритм:

1. Завантажте зображення в папку Google Drive.
2. Отримати загальнодоступну URL-адресу ескізу зображення.
3. Замініть параметр "змінити розмір" у URL-адресі необхідною шириною та / або висотою. (Розмір ескізу за замовчуванням - 220 пікселів).
4. Завантажте зменшений ескіз із Google Диска.

Див. Приклад тут: https://github.com/dobromyslov/google-drive-utils/blob/511c44c2c48862b47c60038423b7f71bf1d28f49/src/index.ts#L150

І остерігайтеся квот GDrive:

• запитів на день: 1000000000
• запитів на 100 секунд на користувача: 1000
• запитів за 100 сек: 10000