我的背景图片带有某种形状的对象（下面的示例）。我想在此图像上添加新图像-图层（位置：绝对的简单div-左/顶部），并且仅添加到我想要的形状上。
然后使用PHP代码将图像（例如10、50，..）添加到仅此形状，而不添加其他位置：
使用PHP / JS / jquery / ...可以通过任何简单的方式来做到这一点吗？我只需要传递多少个项目，并将多少个图像添加到该区域...
最佳答案
这是我的答案的完整改写。
给定随机图片，仅在某些color匹配的情况下，适合许多较小的图片：
我决定选择螃蟹作为开始图片，因为螃蟹很酷：
我只想在图片中有蓝色的地方添加红点
为此，我将答案分为三个部分：
的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);
最后，我添加了一些您可以摆脱的调试输出，但是我们需要在螃蟹上输出点！为了显示每个点都是唯一的，我附加了
JavaScript alert来显示点索引： 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";
}
?>
在这里，我使用
style left和top来给点精确的像素定位。为了使它们与父图片精确匹配，我们需要使用下一节中所述的position:relative;和position:absolute;。的CSS
如您所见，我正在为
div使用一个类，这是为了利用relative positioning的优势。我在文件的顶部，标题之后，添加了以下内容 #crabSection { position:relative; }
.dot { margin: 0px 0px 0px 0px; position:absolute; }
结果
这是给定脚本的运行...您可以轻松保存生成的HTML，因此您不必每次都重新计算位置：
希望这可以帮助！
编辑：这是完整的代码，如果需要的话：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>
另外，只要用PHP打开
$crab图片所描述的颜色遮罩，就可以将img src更改为其他颜色，如果您想要彩色的螃蟹。我添加了一个crabc.png文件，该文件现在由我的img使用，但是它仍然具有与crab.png文件相同的轮廓：最终外观如下：
关于php - 带有随机添加其他图像区域的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13881345/