Voting

The Note You're Voting On

10 years ago
So I have written the most pointless use I could think of for this function (imagecolorat).

Basically it converts every pixel in the given image for an <i> tag. You can set the rendered pixel size with $p

<?php
    $p = 4; // Set pixel width/height
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image to DOM</title>
    <style>
        .canvas {position: relative;}
        .pixel {width: <?= 1*$p; ?>px; height: <?= 1*$p; ?>px; position: absolute; display: block;}
    </style>
</head>
<body>
    
    <form action="/" method="post" enctype="multipart/form-data">
        <input type="file" name="image">
        <input type="submit">
    </form>
    
    <?php
        if ($_FILES) {
            $post_img = $_FILES['image'];
            $filename = $post_img['name'];
            $tmp_img = $post_img['tmp_name'];

            if(preg_match('/[.](jpg)$/', $filename)) {
                $img = imagecreatefromjpeg($tmp_img);
            } else if (preg_match('/[.](gif)$/', $filename)) {
                $img = imagecreatefromgif($tmp_img);
            } else if (preg_match('/[.](png)$/', $filename)) {
                $img = imagecreatefrompng($tmp_img);
            }

            list($width, $height) = getimagesize($tmp_img);

            echo '<div class="canvas" style="width: '.$width*$p.'px; height: '.$height*$p.'px;">';
            for ($i = 0; $i < $height; $i++) {
                $y = $i; // Get Y coords
                for ($j = 0; $j < $width; $j++) {
                    $x = $j; // Get X coords

                    $rgb = imagecolorat($img, $x, $y); // Get pixel color
                    $rgba = imagecolorsforindex($img, $rgb);
                    unset($rgba['alpha']); // Remove Alpha channel

                    $bg_color = implode(', ', $rgba);
                    ?>
                        <i class="pixel" style="background: rgb(<?= $bg_color; ?>); top: <?= $i*$p; ?>px; left: <?= $j*$p; ?>px;"></i>
                    <?php
                }
            }
            echo '</div>';
        }
    ?>

</body>
</html>
<< Back to user notes page