javascript - 以编程方式生成复合肖像马赛克

Question

我需要创建复合肖像马赛克(即由其他肖像制成的肖像)。请参阅下面的引用。

另一个很好的引用是 AndreaMosaic。 http://www.andreaplanet.com/andreamosaic/samples/

或者这个 YouTube 教程(跳到 5 分钟标记) https://www.youtube.com/watch?v=9cy2gVm_ztQ

寻找最佳方法来执行此操作，然后生成可供下载的 jpeg 文件。 理想情况下希望使用 Node/Javascript 来完成此操作，但也可以使用 PHP 或其他方式。

关于从哪里开始有什么建议吗？到处都有一些库，但没有一个非常适合我想要做的事情。

Answer 1

伪造的马赛克很简单。嗯，我尝试了一个简单的乘法，看起来不错。

1. 创建覆盖输入图像大小的照片纹理图案

2. 调制灰度照片图案和原始图像

   简单的乘法就可以了。

这两个步骤可以合并为一个......这里有简单的C++代码:

// globals
const int txrs=41; // number of textures for mosaic
picture txr[txrs]; // mosaic textures
picture pic0,pic1; // input and output images

// init
pic0.load("MonaLisa.jpg");
int sz=32; // mosaic grid size
for (int i=0;i<txrs;i++) // load/resize/grayscale textures
    {
    txr[i].load(AnsiString().sprintf("textures\\%03i.jpg",i));  // load image
    txr[i].resize_fit(sz,sz,0x00000000);                        // resize to tile size
    txr[i].enhance_range();
    txr[i].pixel_format(_pf_u);                                 // convert to grayscale <0,765>
    txr[i].pixel_format(_pf_rgba);                              // convert to grayscale RGBA
    }
pic0.resize_fit((pic0.xs/sz)*sz,(pic0.ys/sz)*sz,0x00000000);    // cut not full tile size part of pic1

// mosaic
int xx,yy,x,y,i,j,sz=txr[0].xs,a,b;
color c0,c1;
pic1=pic0;  // copy source image to destination
// process all regions
for (y=0;y<pic1.ys;y+=sz)
 for (x=0;x<pic1.xs;x+=sz)
    {
    // select random texture
    i=Random(txrs);
    // proces region
    for (yy=0;yy<sz;yy++)
     for (xx=0;xx<sz;xx++)
        {
        // grayscale texture and original color image pixels
        c0=txr[i].p[yy][xx];
        c1=pic1.p[y+yy][x+xx];
        // mutiply them
        for (j=0;j<3;j++)
            {
            a=BYTE(c0.db[j]);
            b=BYTE(c1.db[j]);
            a=(a*b)>>8;
            c0.db[j]=a;
            }
        // store to destinatio image
        pic1.p[y+yy][x+xx]=c0;
        }
    }
pic1.save("out.png");

我使用自己的图片类来存储图像，因此一些成员是:

xs,ys 是图像大小(以像素为单位)
p[y][x].dd 是 (x,y) 位置处的像素，为 32 位整数类型
clear(color) 使用color清除整个图像
resize(xs,ys) 将图像大小调整为新分辨率
bmp 是 VCL 封装的 GDI 位图，具有 Canvas 访问权限
pf 保存图像的实际像素格式:

enum _pixel_format_enum
    {
    _pf_none=0, // undefined
    _pf_rgba,   // 32 bit RGBA
    _pf_s,      // 32 bit signed int
    _pf_u,      // 32 bit unsigned int
    _pf_ss,     // 2x16 bit signed int
    _pf_uu,     // 2x16 bit unsigned int
    _pixel_format_enum_end
    };

颜色和像素的编码如下:

union color
    {
    DWORD dd; WORD dw[2]; byte db[4];
    int i; short int ii[2];
    color(){}; color(color& a){ *this=a; }; ~color(){}; color* operator = (const color *a) { dd=a->dd; return this; }; /*color* operator = (const color &a) { ...copy... return this; };*/
    };

乐队是:

enum{
    _x=0,   // dw
    _y=1,

    _b=0,   // db
    _g=1,
    _r=2,
    _a=3,

    _v=0,   // db
    _s=1,
    _h=2,
    };

我使用的输入图像是这样的:

结果如下:

它可能需要一些亮度调整以匹配原始输入图像属性。