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

Question

我有一个带有某种形状对象的背景图像（下面的示例）。我想向该图像添加新图像 - 图层（具有位置：绝对 - 左/上的简单 div），并且仅在我想要的形状上。

第一个样本

然后使用 PHP 代码将图像（例如 10、50、..）添加到这个形状而不是其他位置：

第二个例子

这可以用 PHP/JS/jquery/... 以任何简单的方式完成吗？我只需要传递多少项目和多少图像被添加到该区域......

score 2 · Accepted Answer

这是我的答案的完整重写。

给定一张随机图片，仅在一些匹配的地方拟合许多较小的color图片：

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

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

为此，我将我的答案分为 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 中，我打开 mycrab.png和 mydot.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并表示a可以放在不走出图片$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 leftandtop为点提供精确的像素定位。为了让它们与父图片精确匹配，我们需要使用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>

另外，只要用$crabPHP打开图片描述的颜色蒙版，img src如果你想要一只五颜六色的螃蟹，你可以把它改成别的。我添加了一个crabc.png现在由 my 使用的文件img，但它仍然具有与该文件相同的轮廓crab.png：

彩色螃蟹

这给出了最终的外观：

带颜色的浏览器

score 1 · Accepted Answer

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

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

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

然后这些点只会出现在箭头中，唯一的问题是一些可能会被添加但不可见（只有当您需要用户与它们交互时才会出现问题）。

你到底想用这些点做什么？

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

2 回答 2

Related

Reference