Javascript 用图像替换平均颜色像素

我需要通过用每种颜色的图像替换输入图像的像素来创建马赛克。图片将由我提供一些最重要的颜色。显然，它应该四舍五入到最接近的颜色，因为我不能为每种rgb颜色使用图片。 我发现这段代码，我认为这可能是一个好的开始，但我不知道如何用图像替换平铺

var TILE\u WIDTH=10；
var瓦块高度=10；
document.getElementById（“输入”）.onchange=function（）{
var reader=new FileReader（）；
reader.onload=函数（e）{
//获取加载的数据并渲染缩略图。
document.getElementById（“image”）.src=e.target.result；
};
//将图像文件作为数据URL读取。
reader.readAsDataURL（this.files[0]）；
};
//创建photomosaic的第一个函数调用
功能影像学（图像）{
//每个瓷砖的尺寸
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

#输出，.container{
文本对齐：居中；
}
.inputDiv{
利润率：20px 0px；
}

创造

我认为这更像是一个reddit问题，而不是stackoverflow@vsync为什么？这个问题似乎太宽泛，本网站无法回答，因此没有人会提供帮助，除非您将问题缩小到一个非常具体的问题。在reddit中，人们可以通过提供指向Github项目的链接提供更多帮助，这些项目可能会实现您想要实现的目标。这是一个完全不同的网站，有着不同的帮助目标，它不是一个像reddit这样的论坛，在这里你可以问复杂的问题并得到各种各样的回答。。问题应该缩小范围