Question

我正在开展一个项目，揭示部分图像，点击按钮即可显示每个部分。主要图像是大图像，每个部分大约10x10。

所以，流程将是：将图像分成50万个较小的图像，最初显示每个部分的白色图像。在每次点击时，将显示图像的随机部分随着点击计数器的增加，将会显示更多的图像。

将图像分割成五十万个静态图像并渲染它们将是一种直接的方式，但过于繁琐。

请指导我如何使用PHP，MYSQL和Jquery执行此操作。我相信需要mysql，因为要记录点击，并且要在某处检查显示的部分！我认为html5 canvas元素可以在某种程度上做到这一点，但我不知道如何！

PS：不是一百万美元的主页垃圾！

Answer 1

使图像使用ImageMagick。

convert -crop 10x10 big_image.png tile%d.png

将.png改为.jpg，如果这是你的开始。

然后以某种方式显示正确的。你如何做到这一点取决于你想要做什么。

以下是我将头像（1000x1000）拆分为200x200块时产生的屏幕截图：

enter image description here

就我而言，很明显我有5行需要处理。

然后，我只需这样做就可以解决这个问题：

<div id='wrapper'>
    <img src='/tile0.jpg' />
    <img src='/tile1.jpg' />
    <img src='/tile2.jpg' />

etc…

</div>

然后在CSS中：

#wrapper {
    width:1000px;
}

#wrapper img {
    width:200px;
    height:200px;
    float:left;
}

现在我检查看起来没问题，然后制作200px×200px的白色图像（称为blank.png）并更新如下：

<div id='wrapper'>
    <img src='/blank.png' />
    <img src='/blank.png' />
    <img src='/blank.png' />

etc…

</div>

使用jQuery保持简单我会这样做：

$(function() {
    $("#wrapper").on('click', 'img', function(){
        $(this).attr('src', '/tile' + $(this).index() + '.jpg');
    });
});

现在我们有了一个原型，我们可以尝试看看浏览器的限制是什么 - 使10px到10px工作吗？（10,000张图片）。

假设是，我们现在必须决定：

对于每个人来说，未覆盖的和被覆盖的是否相同，或者是按用户完成的吗？

我要么使用localStorage存储哪些被翻转和/或将ajax存储回数据库。

你需要一个函数来处理这两种情况，这两种情况都不是特别复杂。

这里的问题将是：

Answer 2

我认为你真的需要考虑你想要的方格数。在浏览器中处理的人数达到了50万 - 这至少有50万个节点有点击，图像等......

尽管如此，您需要遵循的基本步骤是：

请注意，如果有人刷新页面，最困难的事情之一就是 - 现在你需要从数据库中拉出他们看过的方块（相对容易），然后将它们加载到画布中（因为你不喜欢我想要向你的PHP脚本发出五十万个请求。你可能需要提出第二个PHP脚本，它可以查看数据库，找出被点击的内容并生成带有一些白色方块的单个图像，一些图像正方形。

我不得不说我认为你为这个项目选择了错误的媒介 - 浏览器只是不能很好地处理这么多元素