Node.js：ImageMagickを使用しない画像のサイズ変更

Question 1

Node.js（+ Express 4）で、ユーザーがプロフィール画像をサーバーにアップロードして設定できるWebアプリを開発しています。ファイルのmimetypeと最大ファイルサイズはすでに制限されているため、ユーザーは200KBを超えるpngまたはjpeg画像をアップロードできません。

問題は、アップロードされた画像の解像度を200x200にサイズ変更（サーバーサイド）して、ページの読み込みを改善し、ディスク上のスペースを節約したいということです。いくつかの調査の後、すべての回答は、ImageMagickまたはGraphicsMagickに基づくモジュールの使用を示していました。

ただし、単純な画像のサイズ変更を行うためにImageMagick / GraphicsMagickをインストールする必要があるのは、私にはやり過ぎに思えます。それで、Node.jsに対してこれ以外の解決策はありますか？

編集：以前のソリューション（lwip）が維持されなくなったため、受け入れられたソリューションをシャープに変更しました。すべてのフィードバックをありがとう！

Question 2

私はシャープに投票します：

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

これは高速で、通常は最速のimagemagickベースのノードバインディングよりも6倍高速であり、非常に少ないメモリで実行され、おそらく10分の1になります。libvipsイメージライブラリへの直接のシャープなリンク。外部プログラムへのシェルアウトはなく、ライブラリ自体はこのタスクで* magickよりも高速で効率的です。ストリーム、バッファ、ファイルシステムの入出力、カラーマネジメント、透明度、プロミス、オーバーレイ、WebP、SVGなどの便利な機能をサポートしています。

シャープ0.20の時点で、npmはほとんどのプラットフォームで完全なプリコンパイル済みバイナリを自動的にダウンロードするため、node-gypは必要ありません。入力するだけです：

npm install sharp

または：

yarn add sharp

そして、あなたは行きます。

Question 3

私は最近、ランタイム依存関係のない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リポジトリをご覧ください。

Question 4

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

});

私はこれをファイルアップローダーに正常に実装しました。これは魅力のように機能します。

Question 5

他のライブラリ、Jimpに依存することなく、完全にJavaScriptで記述された優れた画像操作ライブラリがあります。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
});

Question 6

シャープは最近人気を博していますが、それは* Magickバインディングと同じ考えです。

ただし、単純な画像のサイズ変更を行うためにImageMagick / GraphicsMagickをインストールする必要があるのは、私にはやり過ぎのようです。

画像のサイズ変更は単純ではありません。JPEG形式は特に複雑であり、さまざまな品質の結果でグラフィックをスケーリングする方法はいくつかありますが、簡単に実装できるものはほとんどありません。この仕事をするために画像処理ライブラリが存在するので、それらをインストールできない理由が他にない場合は、それを選択してください。

Question 7

CanvasはImageMagicより2.3倍高速です。

画像操作のために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

Question 8

大きな画像が必要ない場合は、アップロードする前にクライアント側でサイズを変更できます。

ファイルAPIを使用してJavaScriptでファイルを読み取る

サーバーにアップロードする前に、JavaScriptを使用してクライアント側で画像のサイズを変更する

多くのユーザーはスマートフォンから自分の写真をよく見ることができ、その多くは200kBを超えています。クライアントから提供されたデータは信頼されないため、サーバー側のチェックが引き続き適用されることに注意してください。

Question 9

私はlwipを使用していましたが（以前にarvindによって提案されたように）、png-cropに切り替えました。私にとっては少し速く動作するようです（Win 8.1 x64、ノード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ファイルのみを実行します...

Question 10

シャープは非常にうまく機能し、ストリームで簡単に使用でき、魅力のように機能しますが、ノードバージョンでコンパイルする必要があります。これは欠点です。AWS S3バケットからの画像を使用して画像処理にSharpを使用していて、完全に機能しましたが、別のモジュールを使用する必要がありました。GMは私にはうまくいきませんでしたが、Jimpはとてもうまくいきました！

書かれた絵のパスに注意を払う必要があります。パスを「/」で始めると、エラーが発生する可能性があります。

これが私がnodeJSでJimpを使用した方法です：

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

            });

また、実行の順序に注意し、コールバックを設定して、必要のないときに他のことが起こらないようにします。Jimp.read（）に「await」を使用してみましたが、うまくいきませんでした。

Question 11

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

Question 12

私はその単純さのために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);
})();

Question 13

Google Drive APIv3を使用して画像のサイズ変更を実装。この方法は、Google AppsScriptで画像をGoogleスプレッドシートに挿入する場合に推奨されます。

アルゴリズム：

アップロードGoogleドライブフォルダに画像をます。
取得する画像サムネイルの公開URLをます。
URLの「resize」パラメータを必要な幅や高さに置き換えます。（デフォルトのサムネイルサイズは220pxです）。
サイズ変更されたサムネイルをGoogleドライブからダウンロードします。

ここの例を参照してください：ご覧ください https //github.com/dobromyslov/google-drive-utils/blob/511c44c2c48862b47c60038423b7f71bf1d28f49/src/index.ts#L150

また、GDriveの割り当てに注意してください。

1日あたりのクエリ：1000000000
ユーザーあたり100秒あたりのクエリ：1000
100秒あたりのクエリ：10000