javascript中的照片马赛克

是否有jquery插件或javascript库来生成照片马赛克（即创建由较小图像组成的图像）？（cf:）

我已经创建了一个JS解决方案，用于使用瓷砖的平均颜色创建photomosaic

 function photomosaic(image) {
      // Dimensions of each tile
      var tileWidth = TILE_WIDTH;
      var tileHeight = TILE_HEIGHT;

      //creating the canvas for photomosaic
      var canvas = document.createElement('canvas');
      var context = canvas.getContext("2d");
      canvas.height = image.height;
      canvas.width = image.width;

      var imageData = context.getImageData(0, 0, image.width, image.height);
      var pixels = imageData.data;

      // Number of mosaic tiles
      var numTileRows = image.width / tileWidth;
      var numTileCols = image.height / tileHeight;


      //canvas copy of image
      var imageCanvas = document.createElement('canvas');
      var imageCanvasContext = canvas.getContext('2d');
      imageCanvas.height = image.height;
      imageCanvas.width = image.width;
      imageCanvasContext.drawImage(image, 0, 0);


      //function for finding the average color
      function averageColor(row, column) {
          var blockSize = 1, // we can set how many pixels to skip

              data, width, height,
              i = -4,
              length,
              rgb = {
                  r: 0,
                  g: 0,
                  b: 0
              },
              count = 0;          

          try {
              data = imageCanvasContext.getImageData(column * TILE_WIDTH, row * TILE_HEIGHT, TILE_HEIGHT, TILE_WIDTH);
          } catch (e) {
              alert('Not happening this time!');
              return rgb;
          }

          length = data.data.length;

          while ((i += blockSize * 4) < length) {
              ++count;
              rgb.r += data.data[i];
              rgb.g += data.data[i + 1];
              rgb.b += data.data[i + 2];
          }

          // ~~ used to floor values
          rgb.r = ~~(rgb.r / count);
          rgb.g = ~~(rgb.g / count);
          rgb.b = ~~(rgb.b / count);

          return rgb;

      }

      // Loop through each tile
      for (var r = 0; r < numTileRows; r++) {
          for (var c = 0; c < numTileCols; c++) {
              // Set the pixel values for each tile
              var rgb = averageColor(r, c)
              var red = rgb.r;
              var green = rgb.g;
              var blue = rgb.b;

              // Loop through each tile pixel
              for (var tr = 0; tr < tileHeight; tr++) {
                  for (var tc = 0; tc < tileWidth; tc++) {

                      // Calculate the true position of the tile pixel
                      var trueRow = (r * tileHeight) + tr;
                      var trueCol = (c * tileWidth) + tc;

                      // Calculate the position of the current pixel in the array
                      var pos = (trueRow * (imageData.width * 4)) + (trueCol * 4);

                      // Assign the colour to each pixel
                      pixels[pos + 0] = red;
                      pixels[pos + 1] = green;
                      pixels[pos + 2] = blue;
                      pixels[pos + 3] = 255;
                  };
              };
          };
      };

      // Draw image data to the canvas
      context.putImageData(imageData, 0, 0);
      return canvas;
  }

  function create() {
      var image = document.getElementById('image');
      var canvas = photomosaic(image);
      document.getElementById("output").appendChild(canvas);
  };

function photomosic（图像）{
//每个瓷砖的尺寸
var tileWidth=瓷砖宽度；
var tileHeight=瓷砖高度；
//为photomosaic创建画布
var canvas=document.createElement（'canvas'）；
var context=canvas.getContext（“2d”）；
canvas.height=image.height；
canvas.width=image.width；
var imageData=context.getImageData（0，0，image.width，image.height）；
var像素=imageData.data；
//马赛克瓷砖的数量
var numTileRows=image.width/tileWidth；
var numTileCols=image.height/tileHeight；
//图像的画布副本
var imageCanvas=document.createElement（'canvas'）；
var imageCanvasContext=canvas.getContext（'2d'）；
imageCanvas.height=image.height；
imageCanvas.width=image.width；
drawImage（图像，0，0）；
//用于查找平均颜色的函数
函数averageColor（行、列）{
var blockSize=1，//我们可以设置跳过多少像素
数据、宽度、高度、，
i=-4，
长度，
rgb={
r:0，
g:0，
b:0
},
计数=0；
试一试{
data=imageCanvasContext.getImageData（列*平铺宽度，行*平铺高度，平铺高度，平铺宽度）；
}捕获（e）{
警报（“这次没有发生！”）；
返回rgb；
}
长度=data.data.length；
而（（i+=块大小*4）<长度）{
++计数；
rgb.r+=data.data[i]；
rgb.g+=data.data[i+1]；
rgb.b+=data.data[i+2]；
}
//~~用于确定下限值
rgb.r=~~（rgb.r/计数）；
rgb.g=~~（rgb.g/计数）；
rgb.b=~~（rgb.b/计数）；
返回rgb；
}
//在每个瓷砖上打圈
对于（var r=0；r

---

演示：

这不是更适合作为服务器端工作吗？也许称为“PhotoMosaic”的jQuery插件值得一看。