顯示由部分

Question

我的工作，揭示了圖像的部分，與上一個按鈕，點擊透露每個部分項目形象的一部分。主圖像是一個大的圖像，每個部分大約10x10。

因此，流程將是： 圖像分成五十萬較小的圖像，並初步顯示出白色圖像的每一個部分。當點擊計數器增加時，將顯示圖像的隨機部分 ，將顯示更多圖像。

分割圖像分成五十萬靜態圖像和渲染他們將是一個直接的方法，但太麻煩了。

請指導我如何使用PHP，MySQL和jQuery做到這一點。我相信mysql是必要的，因爲點擊將被記錄下來，並且顯示的部分將在某處被檢查！我認爲html5 canvas元素可以在一定程度上做到這一點，但我不知道該怎麼做！

PS：不是百萬美元主頁垃圾！

Answer 1

使圖像使用ImageMagick。

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

變化png格式以JPG格式，如果這是你開始有什麼。

然後以某種方式顯示正確的。你如何做到這一點取決於你正在嘗試做什麼。

這裏是什麼產生，如果我拆我的頭像（1000×1000）爲200×200塊截圖：

對我來說，很明顯，我有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的存儲被翻轉和/或阿賈克斯回數據庫。

你需要一個函數來處理其中的任意一種情況下，這兩者都不是特別複雜。

的問題，這裏將是：

• 是您的瀏覽器速度不夠快，處理很多圖片？
• 一次有多少人在上面工作？
• 它有點不同步嗎？
• 如果猜測文件名是微不足道的，這有什麼關係嗎？

Answer 2

我認爲你真的需要考慮你想要的方格數。五十萬是一個巨大的數字與在瀏覽器中處理 - 這是與點擊，圖像等至少五十萬節點...

這就是說，你需要遵循的基本步驟是：

• 生成一個PHP腳本，它接受一個源圖像和一個期望的段，並提取它作爲一個獨特的形象
• 生成一個HTML頁面（可能使用HTML5畫布），這將通過所有可能的座標進行迭代，並用填充它們白色方塊。
• 添加一個單擊處理程序在畫布上，並計算已被點擊
• 調用PHP腳本爲圖像
• 的該段在腳本段，記錄點擊，然後在數據庫

請注意，如果有人刷新頁面，最困難的事情之一就是 - 現在您需要從數據庫中取出他們已經看到的方塊（相對容易），然後將它們加載到畫布中（因爲您不想要向您的PHP腳本發出50萬個請求）。你大概必須想出第二個PHP腳本，它可以查看數據庫，找出被點擊的內容，並根據需要用一些白色方塊和一些圖像方塊生成單個圖像。

我不得不說，我覺得你挑選這個項目了錯誤的媒體 - 瀏覽器就是不處理這些元素以及