显示由部分

-1

我的工作，揭示了图像的部分，与上一个按钮，点击透露每个部分项目形象的一部分。主图像是一个大的图像，每个部分大约10x10。显示由部分

因此，流程将是：图像分成五十万较小的图像，并初步显示出白色图像的每一个部分。当点击计数器增加时，将显示图像的随机部分，将显示更多图像。

分割图像分成五十万静态图像和渲染他们将是一个直接的方法，但太麻烦了。

请指导我如何使用PHP，MySQL和jQuery做到这一点。我相信mysql是必要的，因为点击将被记录下来，并且显示的部分将在某处被检查！我认为html5 canvas元素可以在一定程度上做到这一点，但我不知道该怎么做！

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

2013-05-12 sandeep

要获得50万个10×10平方，你的画面将是> 21MP。这是相当大的，不大可能适合大多数现代显示器没有滚动/缩放。无论如何，你应该告诉我们你已经尝试了什么，你打算如何使它工作以及你遇到什么具体问题 - 拆分图片，换出段，记录点击或？ – Basic 2013-05-12 18:53:24

10x10px就是我的意思。我认为这不会太大！ – sandeep 2013-05-12 18:55:51

假设总共有500,000个方格和一个方形图像，那么在每个方向上都是~707个方格。如果每个正方形是10px，那就是7,070x7070像素... – Basic 2013-05-12 18:57:32

使图像使用ImageMagick。

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

变化png格式以JPG格式，如果这是你开始有什么。

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

这里是什么产生，如果我拆我的头像（1000×1000）为200×200块截图：

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; 
}

现在我会检查看起来OK，然后进行由200像素白色200像素图像（称为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的存储被翻转和/或阿贾克斯回数据库。

你需要一个函数来处理其中的任意一种情况下，这两者都不是特别复杂。

的问题，这里将是：

是您的浏览器速度不够快，处理很多图片？
一次有多少人在上面工作？
它有点不同步吗？
如果猜测文件名是微不足道的，这有什么关系吗？

来源

2013-05-12 18:59:38

这只涵盖了问题的一小部分，我想也许它应该是一个评论？ – Bill 2013-05-12 19:00:54

谢谢比利，我会试试看。虽然一小部分，应该帮助我开始！ – sandeep 2013-05-12 19:03:02

感谢@rich精彩的提示！这非常有帮助，我会试一试！ – sandeep 2013-05-12 19:16:06

我认为你真的需要考虑你想要的方格数。五十万是一个巨大的数字与在浏览器中处理 - 这是与点击，图像等至少五十万节点...

这就是说，你需要遵循的基本步骤是：

生成一个PHP脚本，它接受一个源图像和一个期望的段，并提取它作为一个独特的形象
生成一个HTML页面（可能使用HTML5画布），这将通过所有可能的坐标进行迭代，并用填充它们白色方块。
添加一个单击处理程序在画布上，并计算已被点击
调用PHP脚本为图像
的该段在脚本段，记录点击，然后在数据库

请注意，如果有人刷新页面，最困难的事情之一就是 - 现在您需要从数据库中取出他们已经看到的方块（相对容易），然后将它们加载到画布中（因为您不想要向您的PHP脚本发出50万个请求）。你大概必须想出第二个PHP脚本，它可以查看数据库，找出被点击的内容，并根据需要用一些白色方块和一些图像方块生成单个图像。

我不得不说，我觉得你挑选这个项目了错误的媒体 - 浏览器就是不处理这些元素以及

来源

2013-05-12 19:02:02 Basic

这将是一个很好的方法，但是在画布上跟踪鼠标坐标不适合我的作品，因为我需要在页面上放置一个按钮，并在不同的位置显示图像部分！ – sandeep 2013-05-12 19:06:54

然后在那种情况下，将该步骤更改为“单击该按钮并找到一个尚未使用mysql显示的方块” – Basic 2013-05-12 20:23:24

回答

相关问题