给爱知乎添加Nodejs拼图模式（mosaic mode）

给爱知乎添加Nodejs拼图模式（Mosaic Mode）

博客：http://liteneo.com/2014/06/23/mosaic-mode/

之前爱知乎的日历页面采用的是封面视图，每天的封面用的是当天内容的最后一张图片。今天突发奇想，用当天所有的图片来拼成封面，于是现在变成了这样：

因为没有降低图片质量，所以现在加载日历页面的图片会比之前慢不少。

由于托管在JAE，所以采用GraphicsMagick之类的后端module都被排除了。不然我会使用aheckmann/gm，于是我使用了国人开发的node-images，使用起来非常简单，虽然还有些问题，但能满足我的需求。

附上代码：

const request = require('request');
const images = require('node-images');
const fs = require('fs');

// 拼图函数
function mosaic(json) {
  // 计算拼图大小
  var size = Math.floor(Math.sqrt(json.news.length));
  if (size > 6) size = 6;
  var length = size * size;
  var width = 600 / size;

  // 创建一个空白图像
  var image = images(600, 600);

  var idx = 0;
  
  // 遍历每一张图片
  json.news.forEach(function (item, i) {
    if (i >= length) return;

    // 下载图片
    request.get(item.image, { encoding: null }, function (err, res, data) {
      if (err || res.statusCode != 200 || data.length < 1000) return;

      // 将下载的图片绘制到拼图中
      image.draw(images(data).size(width, width), i % size * width, Math.floor(i / size) * width);

      if (++idx == length) {
        // 保存最终的拼图
        image.save('mosaic-' + json.date + '.jpg', function(err) {
          if (err) console.log(err);
          else {
            console.log("====== mosaic: " + json.date + " ======");
          }
        });
      }
    });
  });
}

// 示例调用
var json = {
  date: '2023-10-01',
  news: [
    { image: 'http://example.com/image1.jpg' },
    { image: 'http://example.com/image2.jpg' },
    { image: 'http://example.com/image3.jpg' },
    // ... 更多图片
  ]
};

mosaic(json);

解释

1. 引入依赖：使用request库下载图片，node-images处理图片。
2. 计算拼图大小：根据新闻数量决定拼图的大小。
3. 创建空白图像：使用node-images创建一个600x600像素的空白图像。
4. 下载并绘制图片：遍历每一张图片，下载并绘制到拼图中。
5. 保存拼图：当所有图片都绘制完成后，将拼图保存为文件。

通过这种方式，我们可以将当天的所有图片拼接成一张大图，作为日历页面的封面。