PNG Image to CSS Styled DIV converter

In a nutshell, this utility is used to convert each pixel of an image
into a shadowbox for a div.


This is an expirimental project aimed at protecting images from
being downloaded.



Currently, this approach isn't realistic because too much RAM is consumed
by all of the resultant div elements.


Also, due to the alpha/beta nature of this release, only PNG images are supported.


Who knows what kind of result's you will get... But.... Have fun!


To use this utility, you need to specify a source image URL location with the get variable URL.

You can also specify the optional backcolor and imagebackcolor properties in hex(excluding the # symbol)
Specifying those properties can help compress the return data
Example - http://paulishak.com/cssdivimage.php?url=images/magicpw.png&backcolor=0000ff&imagebackcolor=000000

The source code for this project is:
<?php
    include('includes/config.inc.php');
    $bColor = "000000";
    $imageBackColor = "000000";
    if(isset($_GET['backcolor'])) $bColor = $_GET['backcolor'];
    if(isset($_GET['imagebackcolor'])) $imageBackColor = $_GET['imagebackcolor'];

    if(!isset($_GET['url']))
    {
        include('templates/template_head.php.html');
        ?>
            <!DOCTYPE html>
            <html
                <head>
                </head>
                <body style="color:white;background-color:rgb(66,66,66);background-image: url('images/circuit.jpg');background-repeat: repeat;">
                    <font face="courier">
                        <center>
                            <h1>PNG Image to CSS Styled DIV converter</h1>
                            <p>
                                In a nutshell, this utility is used to convert each pixel of an image<br>
                                into a shadowbox for a div.<br>
                            </p>
                            <br>
                                This is an expirimental project aimed at protecting images from<br>
                                being downloaded.<br>
                            <br><br>
                            <br>
                            Currently, this approach isn't realistic because too much RAM is consumed<br>
                            by all of the resultant div elements.<br>
                            <br>
                            <br>
                            Also, due to the alpha/beta nature of this release, only PNG images are supported.<br>
                            <br>
                            <br>
                            Who knows what kind of result's you will get... But.... Have fun!<br>
                            <br>
                            <br>
                            To use this utility, you need to specify a source image URL location with the get variable URL.<br><br>
                            You can also specify the optional backcolor and imagebackcolor properties in hex(excluding the # symbol)<br>
                            Specifying those properties can help compress the return data<br>
                            Example - <a href="http://paulishak.com/cssdivimage.php?url=images/magicpw.png&backcolor=0000ff&imagebackcolor=000000">http://paulishak.com/cssdivimage.php?url=images/magicpw.png&backcolor=0000ff&imagebackcolor=000000</a><br>
                            <br>
                            The source code for this project is:<br>
                            <div style="border-width: 1px;border-style: solid;border-color: #ffffff;text-align: left;width:800px;height:400px;overflow:scroll;color:orange;background-color:black;">
                            <pre><?php echo htmlspecialchars(file_get_contents('cssdivimage.php'));?></pre></div>
                        </center>
                    </font>
                    <br><br>
                    
                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                </body>
            </html>
        <?php
        include('templates/template_footer.php.html');
        exit;
    }
    $filename = $_GET['url'];
    $im = imagecreatefrompng($filename);
    $width = imagesx($im);
    $height = imagesy($im);
    $cols = $width;
    $rows = $height;
    $rowHeight = 1;
    $colWidth = 1;
    $totalWidth = $cols * $colWidth;
    $totalHeight = $rows * $rowHeight;
    $startX = 0;
    $startY = 0;
    $bodyHTML = "<div id=\"cssimage\"></div>\r\n";
    $css = "#cssimage\r\n            {\r\n            Width:".$totalWidth."px;background-color:#$bColor;\r\n            Height:".$totalHeight."px;\r\n            }\r\n            #cssimage:after\r\n            {\r\n            content: '';\r\n            display: block;\r\n            width:1px;\r\n            height:1px;\r\n            background:rgb(255, 255, 255);\r\n            box-shadow:";
    $counter = 0;
    function h($s)
    {
       return str_pad(dechex($s),2,"0",STR_PAD_LEFT);
    }
    for($x=$startX; $x <=($totalWidth - $colWidth + $startX);$x = $x + $colWidth)
    {
        for($y=$startY; $y <=($totalHeight - $rowHeight + $startY);$y = $y + $rowHeight)
        {
            $xa = $x / $colWidth;
            $ya = $y/ $rowHeight;
            $rgb = imagecolorat($im, $xa, $ya);
            $r = ($rgb >> 16) & 0xFF;
            $g = ($rgb >> 8) & 0xFF;
            $b = $rgb & 0xFF;
            $hex = h($r).h($g).h($b);
            if($hex == $imageBackColor) continue;
            $hex = $str = ltrim($hex, '0');
            if($hex == $imageBackColor) continue;
            $hex = "#".$hex;
            
            $hex = "rgb(".$r.",".$g.",".$b.")";
            $css = $css.$x."px ".$y."px ".$hex.",";
            if($counter % 6 == 0){$css .= "\r\n                ";}
            $counter = $counter + 1;   
        }
    }
    $css = $css."            }\r\n";
    $css = str_replace(",            \r\n}", ";\r\n            }", $css);
    $css = str_replace(",            }", ";\r\n            }", $css);
?>
<!DOCTYPE html>
<html>
    <head>
        <style>
            <?php echo $css ?>
        </style>
    </head>
    <body>
        <?php echo $bodyHTML; ?>
    </body>
</html>