Node.js: ImageMagick olmadan görüntüyü yeniden boyutlandırma

Node.js (+ express 4) üzerinde kullanıcıların profil resimlerini sunucuya yükleyerek ayarlayabilecekleri bir web uygulaması geliştiriyorum. Dosya mimetipini ve maksimum dosya boyutunu zaten sınırladık, böylece kullanıcı 200 KB'tan fazla png veya jpeg resim yükleyemez.

Sorun, sayfa yüklemesini iyileştirmek ve diskte yer tasarrufu sağlamak için yüklenen görüntünün çözünürlüğünü 200x200 olarak yeniden boyutlandırmak (sunucu tarafında) istiyoruz. Biraz araştırmadan sonra, tüm cevaplar ImageMagick veya GraphicsMagick'e dayalı herhangi bir modülü kullanmaya işaret etti.

Bununla birlikte, basit bir görüntü yeniden boyutlandırma yapmak için ImageMagick / GraphicsMagick'i kurmak zorunda kalmak benim için çok fazla gözüküyor, bu yüzden Node.js için bundan başka bir çözüm var mı?

Düzenleme: Önceki çözüm (lwip) artık korunmadığından kabul edilen çözümü keskin olarak değiştirdim . Bütün geri bildirimleriniz için teşekkürler!

Keskinliğe oy verirdim :

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
  });

Hızlıdır , tipik olarak en hızlı imge-sihirli tabanlı düğüm bağlamalarından 6 kat daha hızlıdır ve çok az bellekte, belki de 10 kat daha azdır . libvip'lere keskin bağlantılardoğrudan görüntü kitaplığına , harici bir programa yoktur ve kitaplığın kendisi bu görevde * magick'ten daha hızlı ve daha etkilidir. Akış, arabellek ve dosya sistemi girişi ve çıkışı, renk yönetimi, şeffaflık, vaatler, kaplamalar, WebP, SVG ve daha fazlası gibi yararlı şeyleri destekler.

Keskin 0.20'den itibaren npm, çoğu platformda önceden derlenmiş tam ikili dosyaları otomatik olarak indirecektir, bu nedenle düğüm-gyp'ye gerek yoktur. Sadece şunu girin:

npm install sharp

veya:

yarn add sharp

Ve sen git.

Yakın zamanda herhangi bir çalışma zamanı bağımlılığı olmadan NodeJS için bir görüntü işleme modülü geliştirmeye başladım ( nedenini okuyun ). Hala erken aşamalarda, ancak zaten kullanılabilir durumda.

İstediğiniz şey şu şekilde yapılacaktır:

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.
    });
});

Modülün Github deposunda daha fazla bilgi .

Lwip'e bir göz atın: https://github.com/EyalAr/lwip

Çok basit ve kullanımı kolay

npm install lwip

ve sonra düğüm kodunuzda,

// 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.
    });

});

Bunu dosya yükleyicimde başarıyla uyguladım ve bir cazibe gibi çalışıyor.

Jimp, diğer kitaplıklara bağımlılığı olmayan, tamamen JavaScript ile yazılmış iyi bir görüntü işleme kitaplığı var. https://github.com/oliver-moran/jimp

Örnek kullanım:

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 , son zamanlarda biraz popülerlik kazandı, ancak bu, * Magick bağlamaları ile aynı fikir.

Ancak, basit bir görüntü yeniden boyutlandırma yapmak için ImageMagick / GraphicsMagick'i kurmak zorunda kalmak benim için fazla abartılı görünüyor

Görüntüyü yeniden boyutlandırma basit olmaktan başka her şeydir. JPEG formatı özellikle karmaşıktır ve grafikleri farklı kalitede sonuçlarla ölçeklemenin birkaç yolu vardır, bunlardan birkaçı kolayca uygulanabilir. Bu işi yapmak için görüntü işleme kitaplıkları vardır, bu nedenle bunları yükleyememenizin başka bir nedeni yoksa, devam edin.

Canvas, ImageMagic'ten 2,3 kat daha hızlıdır .

Görüntü manipülasyonu için Node.js modüllerini karşılaştırmayı deneyebilirsiniz - 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

Büyük bir resme ihtiyacınız yoksa, yüklemeden önce istemci tarafında yeniden boyutlandırabilirsiniz:

Dosya API'larını kullanarak JavaScript'teki dosyaları okuma

Sunucuya yüklemeden önce istemci tarafı javascript ile yeniden boyutlandırma

Birçok kullanıcı bir akıllı telefondan kendilerini iyi bir şekilde görebilir ve çoğu 200kB'nin üzerindedir. İstemci tarafından sağlanan verilere güvenilmeyeceğinden, sunucu tarafı kontrollerinin hala geçerli olduğunu unutmayın.

Iwip kullanıyordum (daha önce arvind tarafından önerildiği gibi) ancak png- kırpmaya geçtim . Benim için biraz daha hızlı çalışıyor gibi görünüyor (Win 8.1 x64, Node v0.12.7). Depodaki kod inanılmaz derecede hafif görünüyor ve operasyonel olarak kullanımı basit.

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

Tabii ki, sadece png dosyaları yapacak ...

Sharp çok iyi çalışır ve akışlarla kullanımı kolaydır, bir cazibe gibi çalışır, ancak onu düğüm sürümüyle derlemeniz gerekir, bu onun bir dezavantajıdır. Sharp'ı görüntü işleme için AWS S3 kovasından bir görüntü ile kullanıyordum ve mükemmel bir şekilde çalıştım, ancak başka bir modül kullanmak zorunda kaldım. GM benim için çalışmadı ama Jimp çok iyi çalıştı!

Yazılı resmin yoluna dikkat etmelisiniz, yola "/" ile başlarsanız size bazı hatalar verebilir.

Jimp'i nodeJS'de böyle kullandım:

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() } }

            });

Ayrıca yürütme sırasına dikkat edin, bir geri arama yapın, böylece istemediğinizde başka şeyler olmaz. Jimp.read () için "await" kullanmayı denedim, ancak işi iyi yapmadı.

Bunu jimp (node_module) kullanarak yapabilirsiniz.

Yerel Yazma:

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'e veya istediğiniz yere yüklemek için.

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 kitaplığını basitliği için seviyorum .

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);
})();

Google Drive API v3 kullanılarak görüntü yeniden boyutlandırma uygulandı . Bu yöntem, Google Apps Komut Dosyasının Google E-Tablolar'a resim eklemesi için önerilir.

Algoritma:

1. Google Drive klasörüne resim yükleyin .
2. Görüntünün genel URL'sini alın .
3. URL'deki "yeniden boyutlandır" parametresini gerekli genişlik ve / veya yükseklik ile değiştirin. (Varsayılan küçük resim boyutu 220 pikseldir).
4. Google Drive'dan yeniden boyutlandırılmış küçük resmi indirin.

Buradaki örneğe bakın: https://github.com/dobromyslov/google-drive-utils/blob/511c44c2c48862b47c60038423b7f71bf1d28f49/src/index.ts#L150

GDrive kotalarına dikkat edin:

• günlük sorgu: 1000000000
• kullanıcı başına 100 saniye başına sorgu: 1000
• 100 saniye başına sorgu: 10000