-1

我正在开发一个显示图像部分的项目，每个部分都在单击按钮时显示。主图像将是一个大图像，每个部分约为 10x10。

因此，流程将是：将图像拆分为一百万个较小的图像，并最初为每个部分显示一个白色图像。每次点击时，随着点击计数器的增加，图像的随机部分将被显示，更多的图像将被显示。

将图像分割成半百万个静态图像并进行渲染将是一种直接的方式，但过于繁琐。

请指导我如何使用 PHP、MYSQL 和 Jquery 做到这一点。我相信需要mysql，因为要记录点击，并且要在某处检查显示的部分！我认为 html5 canvas 元素可以以某种方式解决问题，但我不知道怎么做！

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

4

2 回答 2

0

要制作图像，请使用 ImageMagick。

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

将 .png 更改为 .jpg 如果这是您的开始。

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

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

在此处输入图像描述

就我而言，很明显我有 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;
}

现在我会检查它看起来不错，然后制作一个 200 像素 x 200 像素的白色图像（称为空白.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');
    });
});

现在我们有了一个原型，我们可以尝试看看浏览器的限制是什么——将其设置为 10 像素乘 10 像素有效吗？（10,000 张图像）。

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

未覆盖的和已覆盖的是否对每个人都相同，还是每个用户都完成？

我要么使用 localStorage 来存储翻转和/或 ajax 回数据库。

您需要一个函数来处理其中任何一种情况，这两种情况都不是特别复杂。

这里的问题将是：

  • 您的浏览器是否足够快以处理这么多图像？
  • 有多少人同时为它工作？
  • 如果它有点不同步有关系吗？
  • 猜测文件名是否很重要？
于 2013-05-12T18:59:38.693 回答
0

我认为你真的需要考虑你想要的正方形的数量。100 万是浏览器中要处理的大量数字——至少有 50 万个节点具有点击、图像等......

也就是说，您需要遵循的基本步骤是：

  • 生成一个 PHP 脚本，该脚本获取源图像和所需片段并将其提取为唯一图像
  • 生成一个 html 页面（可能使用 Html5 画布），它将遍历所有可能的坐标并用白色方块填充它们。
  • 将点击处理程序添加到画布并计算已点击的段
  • 为该图像片段调用 PHP 脚本
  • 在脚本中，记录数据库中的点击

请注意，如果有人刷新页面，最困难的事情之一就是 - 现在您需要从数据库中提取他们见过的正方形（相对容易），然后将它们加载到画布中（这很困难，因为您不想要向您的 PHP 脚本发出半百万个请求）。您可能必须想出第二个 PHP 脚本，它可以查看数据库、计算出点击的内容并生成带有一些白色方块和一些适当的图像方块的单个图像。

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

于 2013-05-12T19:02:02.377 回答