隨機添加其他圖像的區域的圖像

我有一些帶有某種形狀的對象（下面的示例）的背景圖像。我想添加新的圖像 - 圖層（簡單的div與位置：絕對 - 左/頂部）到這個圖像，只有在我想要的形狀。隨機添加其他圖像的區域的圖像

first sample

然後用PHP代碼添加的圖像（例如10，50，...）僅此形狀並沒有其他地方：

second example

這是可能做就任何使用PHP/JS/jquery/...的簡單方法？我只需要通過多少項目，並將許多圖像添加到該區域...

2012-12-14 Mark Frost

PHP運行在服務器上。 JavaScript在客戶端上運行。我不認爲你明白你在這裏真正要求什麼。請更具體一些。 –

它在哪裏完成並不重要，它可以在客戶端或服務器端完成。兩者都可以。正如所寫的，我不需要圖層上的圖層，但添加了絕對位置的div。儘管我可以看到它只能通過獲得有效的X/Y區域位置來完成，但這是最大的問題。有沒有可能和工具，我可以上傳圖像，然後繪製一個形狀，腳本計算所選區域內的所有X/Y值？這將是非常有用的。 –

下面是我的答案的完整重寫。

給定一個隨機的畫面，適合很多小圖片只在一些color匹配：

我決定去與螃蟹作爲起始畫面，因爲螃蟹是涼：

Crab

我只想添加圖片中有藍色的紅點

Red dots

要做到這一點，我將在3個部分分割我的回答：

HTML

我從一個非常簡單的HTML文件：

<html> 
    <head> 
     <title>Crab Example</title> 
    </head> 
    <body> 
     <div> 
      <h1>Dots on the crab example</h1> 
     </div> 
     <div id="crabSection"> 
      <img src="crab.png"> 
     </div> 
    </body> 
</html>

這給了我們一個起點爲了渲染我們的點綴螃蟹！

PHP

現在，在PHP中，我打開我的兩個crab.png和我dot.png分析其內容，並找到隨機位置，其中dot.png可以容納一個all blue部分。在<img src="crab.png">後，我插入如下：

<?php 
     $crab = imagecreatefrompng("crab.png"); 
     $dot = imagecreatefrompng("dot.png"); 

     $numDesiredDots = 10; 
     $numCreatedDots = 0; 

     $crabWidth = imagesx($crab); 
     $crabHeight = imagesy($crab); 

     $dotWidth = imagesx($dot); 
     $dotHeight = imagesy($dot); 

     $spawnableWidth = $crabWidth - $dotWidth; 
     $spawnableHeight = $crabHeight - $dotHeight; 

     srand(time()); 

     $testingForDotSubpart = imagecreatetruecolor($dotWidth, $dotHeight); 

     $validCoordinates = array(); 
     $invalidCoordinates = array(); 

     $colorWereLookingFor = 0xFF; // ARGB - our crab is blue

這裏，有幾個細節：

$numDesiredDots是硬編碼到10，但它可以很容易地參數！
$spawnableWidth和$spawnableHeight表示最大座標dot可以放置在不用出圖像
srand(time());被簡單地用於具有不同的隨機每次
$testingForDotSubpart是我將使用測試一個小的圖像給定座標，看它是否只包含正確顏色的像素
$colorWereLookingFor現在設置爲blue，因爲我的螃蟹是藍色的，如果你想要red，它應該是類似於0xFF0000。在這個例子中，我使用了與HTML和圖像處理相同的PNG，但您可以輕鬆地爲圖像處理創建一個蒙版併爲HTML提供全綵色圖像。現在

，我們需要爲每一個點，它是用下面的PHP實現創建有效的座標：只要

我們迭代，因爲我們：

 while($numCreatedDots < $numDesiredDots) 
     { 
      $randomX = rand() % $spawnableWidth; 
      $randomY = rand() % $spawnableHeight; 

      imagecopy($testingForDotSubpart, $crab, 0, 0, $randomX, $randomY, $dotWidth, $dotHeight); 
      $valid = true; 
      for($x = 0; $x < $dotWidth; $x++) 
      { 
       for($y = 0; $y < $dotHeight; $y++) 
       { 
        if(imagecolorat($testingForDotSubpart, $x, $y) != $colorWereLookingFor) 
        { 
         $valid = false; 
         break 2; 
        } 
       } 
      } 

      if($valid) 
      { 
       array_push($validCoordinates, array('x' => $randomX, 'y' => $randomY)); 
       $numCreatedDots++; 
      } 
      else 
      { 
       // you can get rid of this else, it's just to show you how many fails there are 
       array_push($invalidCoordinates, array('x' => $randomX, 'y' => $randomY)); 
      } 
     }

再如，有的解釋沒有創建我們想要的所有點，對於非常複雜的圖像，這可能需要太多時間，您可以添加最大嘗試次數

我們首先創建一個隨機X,Y座標吃
我們複製的小窗口，點可能最終
我們測試這個窗口內的所有像素，以確保它們是正確的顏色
如果該窗口是有效的，我們的座標添加到陣列
出於調試目的，我添加了一個$invalidCoordinates陣列顯示多次嘗試如何失敗 - 更復雜的畫面，更多的失敗，將會

現在，我們已經計算出了所有的位置，我們需要清理資源：

 imagedestroy($testingForDotSubpart); 
     imagedestroy($dot); 
     imagedestroy($crab);

最後，我添加了一些可以擺脫的調試輸出，但是我們需要在螃蟹上輸出點！要告訴你，每個點都是獨一無二的，我連着JavaScriptalert，顯示點指數：

 echo "<p>Valid Coords: <br>"; 

     foreach($validCoordinates as $coord) 
     { 
      echo "X: " . $coord['x'] . " Y: " . $coord['y'] . "<br>\n"; 
     } 

     echo "<br>Invalid Coords " . count($invalidCoordinates) . "</p>\n"; 

     // Now add the dots on the crab! 
     for($i = 0; $i < count($validCoordinates); $i++) 
     { 
      $coord = $validCoordinates[$i]; 
      echo "<div class='dot' style='left:".$coord['x'].";top:".$coord['y'].";'><a href='javascript:alert(".$i.");'><img src='dot.png'></a></div>\n"; 
     }   
?>

在這裏，我使用的是styleleft和top給出精確的像素定位點。爲了使它們與父圖片精確匹配，我們需要使用position:relative;和position:absolute;，如下一節所述。

CSS

正如你所看到的，我使用的是類爲div，這是採取relative positioning的優勢。我加在文件的頂部，標題之後，下面

 #crabSection { position:relative; } 
     .dot { margin: 0px 0px 0px 0px; position:absolute; }

結果

這裏是給定的腳本的運行...你可以輕鬆保存生成的HTML，所以你不要「T不得不每次重新計算的位置：

Browser

希望這有助於！

編輯：這裏是完整的代碼，如果你需要它：pastebin

編輯2：注意有沒有重疊的檢查，你可能要檢查的是矩形的$randomX，$randomY定義， $randomX + $dotWidth和$randomY + $dotHeight不會與$validCoordinates中座標的現有矩形重疊。

編輯3：一旦生成，你可以簡單地打開該頁面的源代碼，並複製div您HTML所以它不是再生每次。

<div class='dot' style='left:100;top:105;'><a href='javascript:alert(0);'><img src='dot.png'></a></div> 
<div class='dot' style='left:150;top:151;'><a href='javascript:alert(1);'><img src='dot.png'></a></div> 
<div class='dot' style='left:128;top:73;'><a href='javascript:alert(2);'><img src='dot.png'></a></div> 
<div class='dot' style='left:144;top:93;'><a href='javascript:alert(3);'><img src='dot.png'></a></div> 
<div class='dot' style='left:164;top:91;'><a href='javascript:alert(4);'><img src='dot.png'></a></div> 
<div class='dot' style='left:108;top:107;'><a href='javascript:alert(5);'><img src='dot.png'></a></div> 
<div class='dot' style='left:22;top:101;'><a href='javascript:alert(6);'><img src='dot.png'></a></div> 
<div class='dot' style='left:54;top:151;'><a href='javascript:alert(7);'><img src='dot.png'></a></div> 
<div class='dot' style='left:32;top:121;'><a href='javascript:alert(8);'><img src='dot.png'></a></div> 
<div class='dot' style='left:142;top:87;'><a href='javascript:alert(9);'><img src='dot.png'></a></div>

而且，只要由$crab圖片用PHP打開描述的顏色面膜，可以在img src變成別的東西，如果你想要一個豐富多彩的螃蟹。我添加了一個crabc.png文件，它現在由我img，但它仍具有相同的輪廓爲crab.png文件：

Colored Crab

哪個給出了這樣的最終外觀：

Browser with Color

來源

2012-12-14 15:31:57 emartel

正如我寫的，我想添加相對位置的div，但問題是獲得有效的X/Y位置。是否有和我可以上傳圖像的工具，然後繪製一個形狀，腳本計算選定區域內的所有X/Y值？這將是非常有用的。像http://www.mobilefish.com/services/record_mouse_coordinates/record_mouse_coordinates.php，但這隻顯示選定的點位置不是所有位置在選定的區域... –

我正在爲你寫東西，這可能是你是什麼尋找 – emartel

對不起，花了相當一段時間來寫:) – emartel

嗯，我不知道它可以添加它們以適應形狀，除非該形狀是在svg中創建的。

你可以有一個帶有圖像的div，它是一個倒轉的箭頭，即圖像是白色的，箭頭被切掉，div上的bgcolor。

然後，您可以將點添加到同一個div，並將其z-索引設置爲低於箭頭圖像。

然後點只會出現在箭頭中，唯一的問題是有些可能會被添加但不可見（如果您需要用戶與他們進行交互只是一個問題）。

你想要做點什麼？

來源

2012-12-14 15:18:30

是的，點必須是可見的，並在特定的區域，他們將有鏈接。 –

嗯，在這種情況下，我會看看你是否可以用SVG做些什麼，或者將形狀分成行和列，這樣你可以設置最大/最小值左/上。我不能想到另一種方式。我肯定會使用jQuery tho。 –

有沒有可能和工具，我可以上傳圖像，然後繪製一個形狀和腳本計算選定區域內的所有X/Y值？這將是非常有用的。 –

隨機添加其他圖像的區域的圖像

回答

相關問題