做一个；马赛克“；php&；javascript

我正在尝试用Javascript和PHP创建一个马赛克类型的脚本，它由许多不同的图像组成一个大的图像，这些图像由小的方形瓷砖组成。这个想法是“伪造”效果，用背景图像覆盖在上面的瓷砖上，使其不透明度达到50%左右。这样做很得体，但看起来肯定没有我想要的那么好

我的问题是，有人对这种方法的替代方案有什么建议吗？我知道在Flash中肯定有这样做的方法，比如马里奥·勒米厄马赛克：

但如果可能的话，我想避免使用闪光灯

---

编辑：添加了实时示例

所以我还没有触及JS层，这都是服务器端的东西。没有预加载器或任何真正让它更可用的东西，这很快就会到来。但到目前为止，我得到的是：

这些小小的图像块是由用户上传的图像创建的，它们通过我构建的一个类来生成。我使用GD2使它们灰度化，这样它们可以更好地吸收背景图像的颜色，我在Photoshop中对背景图像进行了“像素化”

---

如果有人想看到代码的任何部分，请告诉我，我会将其添加到本文中。另外，当这个项目完成后，我打算在Github上为任何想做同样事情的人提供它的全部内容。

也许您的演示HTML是733KB这一事实可能会阻止您使用这种特殊方法。我认为，如果您想做这样的事情，您真的应该使用canvas元素，并在某种“ajax”加载中工作。这可能真的很有趣。但是，如果你要生成这么多的HTML……如果可能的话，你可以考虑使用客户端脚本。只是一些想法…

我最好的猜测是，你最终将使用相对/绝对定位和z-索引以及透明度的组合来获得你所描述的内容。示例标记/现有结构会有很大帮助。我用一个实例更新了我的问题。如果你想看到代码的任何特定部分，请告诉我！如果你对服务器图片很在行，为什么不制作一个单一的图片覆盖，它本身就是你所有假图片的合成呢？这会让网站尖叫得很快，因为它实际上只是两个（甚至一个）图像，而不是成千上万的

图像（顺便说一句，这是一个很好的效果）。你是对的，当然，Ajax可能是最好的，有一个进度条或其他东西让用户知道发生了什么。我考虑过

，但事实上，IE的较低版本不支持它，这让我很回避。有一个插件据说支持IE上的画布操作。我对此没有经验，但显然IE9至少支持画布。走尖端！另外，确保您只加载最终显示的图像大小，以减少带宽。通过阅读另一个回答，我认为渲染一个合成图像是最好的方式，但是，如果你不是在寻找“cred”。。。