调整大小和作物形象和保持长宽比NodeJS和gm

时间:2022-11-19 14:39:42

I've been trying to create some thumbnails using the gm package from NodeJS, but I'm out of lucky. I need to resize images bigger than 600x600 (could be any width/height, starting from the given one) but when I pass the size to gm, it creates an image that doesn't have the same size I requested.

我一直在尝试使用NodeJS的gm包创建一些缩略图,但我很幸运。我需要调整大于600x600的图像(可以是任何宽度/高度,从给定的一个开始)但是当我将大小传递给gm时,它会创建一个与我请求的大小不同的图像。

For example, given this code, I assume that running node app /path/to/image.png I'll receive an image with size of 200x100, but instead I got, say, an image of 180x100 or 200x90...

例如,给定此代码,我假设运行节点app /path/to/image.png我会收到一个大小为200x100的图像,但我得到的图像是180x100或200x90 ...

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

I've also tried with the resize option. There's even an option to force the size, but the aspect ratio of the output goes horrible...

我也尝试过调整大小选项。甚至有一个强制大小的选项,但输出的宽高比变得可怕......

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

4 个解决方案

#1


7  

Try with imagemagick package for NodeJS: https://github.com/yourdeveloper/node-imagemagick

试试用于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');
});

Update: Please note that the node-imagemagick package hasn't been updated in quite a long time. Please consider Freyday's answer since it's most up-to-date.

更新:请注意,node-imagemagick包在相当长的时间内没有更新。请考虑Freyday的答案,因为它是最新的。

#2


103  

To achieve a resized, cropped image with a center gravity with the gm module, you can use something similar to this:

要使用gm模块获得具有中心重力的经过调整大小的裁剪图像,您可以使用与此类似的内容:

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

The '^' argument on the resize function will tell GraphicsMagick to use the height and width as a minimum instead of the default behavior, maximum. The resulting resized image will have either the width or height be your designated dimension, while the non-conforming dimension is larger than the specified size.

resize函数上的'^'参数将告诉GraphicsMagick将高度和宽度用作最小值而不是默认行为maximum。生成的已调整大小的图像将具有指定尺寸的宽度或高度,而不符合尺寸的尺寸大于指定尺寸。

Then gravity function tells GraphicsMagick how the following crop function should behave, which will crop the image to the final size.

然后,引力函数告诉GraphicsMagick下面的裁剪函数应该如何表现,这会将图像裁剪为最终尺寸。

You can find detailed documentation for the GraphicsMagick options used by the gm module here: http://www.graphicsmagick.org/GraphicsMagick.html

您可以在此处找到gm模块使用的GraphicsMagick选项的详细文档:http://www.graphicsmagick.org/GraphicsMagick.html

#3


1  

Another solution without external libraries (except by imagemagick) is create your own solution:

没有外部库的另一个解决方案(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);
    }
  });
}

And then call it:

然后称之为:

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

It will allow your custom parameters of quality, crop, watermark, etc...

它将允许您的质量,裁剪,水印等自定义参数...

#4


-2  

Two things...

两件事情...

1) https://github.com/rsms/node-imagemagick - This package is no longer supported I would recommend the original package you were using.

1)https://github.com/rsms/node-imagemagick - 不再支持此软件包我会推荐您使用的原始软件包。

2) The reason it's not resizing is that the .resize function takes in a string, not an integer. It should be... ('353', '257')

2)它没有调整大小的原因是.resize函数接受一个字符串,而不是一个整数。它应该是...('353','257')

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

#1


7  

Try with imagemagick package for NodeJS: https://github.com/yourdeveloper/node-imagemagick

试试用于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');
});

Update: Please note that the node-imagemagick package hasn't been updated in quite a long time. Please consider Freyday's answer since it's most up-to-date.

更新:请注意,node-imagemagick包在相当长的时间内没有更新。请考虑Freyday的答案,因为它是最新的。

#2


103  

To achieve a resized, cropped image with a center gravity with the gm module, you can use something similar to this:

要使用gm模块获得具有中心重力的经过调整大小的裁剪图像,您可以使用与此类似的内容:

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

The '^' argument on the resize function will tell GraphicsMagick to use the height and width as a minimum instead of the default behavior, maximum. The resulting resized image will have either the width or height be your designated dimension, while the non-conforming dimension is larger than the specified size.

resize函数上的'^'参数将告诉GraphicsMagick将高度和宽度用作最小值而不是默认行为maximum。生成的已调整大小的图像将具有指定尺寸的宽度或高度,而不符合尺寸的尺寸大于指定尺寸。

Then gravity function tells GraphicsMagick how the following crop function should behave, which will crop the image to the final size.

然后,引力函数告诉GraphicsMagick下面的裁剪函数应该如何表现,这会将图像裁剪为最终尺寸。

You can find detailed documentation for the GraphicsMagick options used by the gm module here: http://www.graphicsmagick.org/GraphicsMagick.html

您可以在此处找到gm模块使用的GraphicsMagick选项的详细文档:http://www.graphicsmagick.org/GraphicsMagick.html

#3


1  

Another solution without external libraries (except by imagemagick) is create your own solution:

没有外部库的另一个解决方案(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);
    }
  });
}

And then call it:

然后称之为:

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

It will allow your custom parameters of quality, crop, watermark, etc...

它将允许您的质量,裁剪,水印等自定义参数...

#4


-2  

Two things...

两件事情...

1) https://github.com/rsms/node-imagemagick - This package is no longer supported I would recommend the original package you were using.

1)https://github.com/rsms/node-imagemagick - 不再支持此软件包我会推荐您使用的原始软件包。

2) The reason it's not resizing is that the .resize function takes in a string, not an integer. It should be... ('353', '257')

2)它没有调整大小的原因是.resize函数接受一个字符串,而不是一个整数。它应该是...('353','257')

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