web-dev-qa-db-ja.com

画像のサイズ変更とトリミング、アスペクト比NodeJSとgmの維持

NodeJSのgmパッケージを使用していくつかのサムネイルを作成しようとしましたが、幸運ではありません。私は600x600より大きい画像のサイズを変更する必要があります（指定されたものから始まる任意の幅/高さである可能性があります）が、サイズをgmに渡すと、要求したサイズと同じではない画像が作成されます。

たとえば、このコードが与えられた場合、node app /path/to/image.pngサイズが200x100の画像を受け取りますが、代わりに、たとえば180x100または200x90の画像を取得しました...

gm(fileLocation)
    .thumb(200, 100, 'processed.' + process.argv[2].split('.').pop(), function() {
        console.log("Done!");
    });

サイズ変更オプションも試してみました。サイズを強制するオプションもありますが、出力のアスペクト比は恐ろしくなります...

gm('/path/to/image.jpg')
    .resize(353, 257)
    .write(writeStream, function (err) {
         if (!err) console.log(' hooray! ');
    });
node.jsgraphicsmagick
28
user3277539

NodeJSのimagemagickパッケージで試してください： https://github.com/yourdeveloper/node-imagemagick

im.crop({
    srcPath: process.argv[2],
    dstPath: 'cropped.' + process.argv[2].split('.').pop(),
    width: 200,
    height: 200,
    quality: 1,
    gravity: 'Center'
}, function(err, stdout, stderr){
    if (err) throw err;
    console.log('resized ' + process.argv[2].split('/').pop() + ' to fit within 200x200px');
});

更新：node-imagemagick パッケージはかなり長い間更新されていないことに注意してください。 Freyday's answer が最新であるため、考慮してください。

8
Patrick D'appollonio

gmモジュールを使用して、重心のあるサイズ変更されたトリミングされた画像を実現するには、次のようなものを使用できます。

gm('/path/to/image.jpg')
  .resize('200', '200', '^')
  .gravity('Center')
  .crop('200', '200')
  .write(writeStream, function (err) {
    if (!err) console.log(' hooray! ');
  });

resize関数の'^'引数は、デフォルトではなくminimumとして高さと幅を使用するようGraphicsMagickに指示します動作、maximum。結果としてサイズ変更された画像の幅またはの高さは指定された寸法になりますが、不適合の寸法は指定されたサイズより大きくなります。

次に、gravity関数は、次のcrop関数の動作方法をGraphicsMagickに伝えます。これにより、画像が最終サイズにトリミングされます。

gmモジュールで使用されるGraphicsMagickオプションの詳細なドキュメントは、次の場所にあります。 http://www.graphicsmagick.org/GraphicsMagick.html

109
mikefrey

外部ライブラリのない別のソリューション（imagemagickを除く）は、独自のソリューションを作成します。

var exec = require('child_process').exec;

resize = function (image) {
  var cmd = 'convert ' + image.src + 
  ' -resize ' + image.width + 'x' + image.height + '^' + 
  ' -gravity center -crop ' + image.width + 'x' + image.height + '+0+0 ' +
  image.dst;

  exec(cmd, function(error, stdout, stderr) {
    if(error) {
      console.log(error);
    }
  });
}

そしてそれを呼び出す：

resize({
    src: sourceFile,
    dst: destinyFile,
    width: 320,
    height: 240
});

品質、作物、透かしなどのカスタムパラメータを使用できます。

2
Otto

Node.js用のJimpパッケージをお試しください https://www.npmjs.com/package/jimp 。これは、gmよりも優れていると思います。依存関係は必要ありません。以前にgmを使用しようとしましたが、gmの依存関係をインストールできませんでした。結局私はjimpを使用し、すべてがうまくいきました。

   Jimp.read('lenna.png', (err, lenna) => {
      if (err) throw err;
      lenna
        .resize(256, 256) // resize
        .write('lena-small-bw.jpg'); // save
    });
1
Andy Lai