Question

我有一个带有某种形状物体的背景图像（例如下面的例子）。我想添加新图像 - 图层（带位置的简单div：绝对 - 左/上）到这个图像，只在我想要的形状上。

first sample

然后用PHP代码添加图像（例如10,50，...）只有这个形状而没有其他地方：

second example

使用PHP / JS / jquery / ...可以用任何简单的方法吗？我只需要传递多少项目，并将许多图像添加到该区域......

Answer 1

这是对我的回答的完全重写。

给定一张随机图片，只有在匹配一些color的情况下才能放入许多较小的图片：

我决定用螃蟹作为起始照片，因为螃蟹很酷：

Crab

我只想在图片中有蓝色的地方添加红点

Red dots

为此，我将分三个部分分开答案：

<强> 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。在本例中，我使用相同的PNG进行HTML和图像处理，但您可以轻松地为图像处理创建一个蒙版，并为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，这样您就不必每次都重新计算位置：

Browser

希望这有帮助！

修改：如果您需要，请输入完整代码：pastebin

编辑2 ：请注意，没有重叠检查，您可能需要检查由$randomX，$randomY，$randomX + $dotWidth和{定义的矩形{1}}与$randomY + $dotHeight中坐标的现有矩形不重叠。

编辑3 ：生成后，您只需打开页面来源，然后将$validCoordinates复制到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文件具有相同的大纲：

Colored Crab

最后看一下：

Browser with Color

Answer 2

嗯，我不确定是否可以添加它们以适合形状，除非在svg中创建该形状。

你可以有一个带有图像的div，它是一个倒箭头，即图像是白色的，箭头被切掉，而div上有一个bgcolor。

然后你可以将点添加到同一个div中，只需将它们的z-index设置为低于箭头图像。

然后点只会出现在箭头中，只有一些问题可能会被添加但不可见（如果您需要用户与它们进行交互，则只会出现问题）。

你想用点做什么？

具有以随机顺序添加其他图像的区域的图像

2 个答案: