Node.js：不使用ImageMagick调整图像大小

Question 1

我正在Node.js（+ express 4）上开发一个Web应用程序，用户可以通过将其配置文件图像上传到服务器来对其进行设置。我们已经限制了文件的模仿类型和最大文件大小，因此用户上传的png或jpeg图片不能超过200KB。

问题是我们想将上传的图像分辨率（服务器端）调整为200x200，以改善页面加载并节省磁盘空间。经过研究，所有答案都指向使用任何基于ImageMagick或GraphicsMagick的模块。

但是，对于我来说，必须安装ImageMagick / GraphicsMagick进行简单的图像大小调整似乎太过头了，因此，除了Node.js之外，还有其他解决方案吗？

编辑：由于不再维护以前的解决方案（lwip），因此我将接受的解决方案更改为Sharp。感谢您的所有反馈！

Question 2

我会投票给Sharp：

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倍。直接链接到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 repo上有更多信息。

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

有一个很好的图像处理库，完全用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
});

Question 6

Sharp最近受到了欢迎，但是它与* 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

如果不需要大图像，可以在客户端上调整大小，然后再上传：

使用File API以JavaScript读取文件

在上载到服务器之前，用javascript调整客户端图像的大小

许多用户可能通过智能手机对自己有很好的了解，其中许多用户的容量超过200kB。请注意，客户端提供的数据将不受信任，因此服务器端检查仍然适用。

Question 9

我正在使用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文件...

Question 10

Sharp可以很好地工作，并且易于使用流，就像魅力一样工作，但是您需要使用节点版本进行编译，这是它的缺点。我使用Sharp进行图像处理，并使用了AWS S3存储桶中的图像，并且运行良好，但是我不得不使用另一个模块。通用汽车没有为我工作，但吉普却表现出色！

您必须注意所写图片的路径，如果以“ /”开头的路径可能会给您带来一些错误。

这就是我在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（）使用“等待”，但效果不佳。

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 API v3实现了图像调整大小。建议Google Apps脚本使用此方法将图像插入Google表格中。

算法：

将图片上传到Google云端硬盘文件夹。
得到图像缩略图的公共URL。
将网址中的“调整大小”参数替换为必要的宽度和/或高度。（默认缩略图大小为220像素）。
从Google云端硬盘下载调整大小的缩略图。

在此处查看示例： https ：//github.com/dobromyslov/google-drive-utils/blob/511c44c2c48862b47c60038423b7f71bf1d28f49/src/index.ts#L150

并提防GDrive配额：

每天查询量：1000000000
每用户每100秒的查询数：1000
每100秒的查询数：10000