PNG Image to DIV converter

In a nutshell, this utility is used to convert each pixel of an image into a colored, positioned, 1px wide by 1px tall html <div> tag.


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.
Example - http://paulishak.com/divimage.php?url=http://paulishak.tk/images/magicpw.png

The source code for this project is:
<?php
    include('includes/config.inc.php');
    //requires (PHP 4, PHP 5, PHP 7)
    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 DIV converter</h1>
                            <p>
                                In a nutshell, this utility is used to convert each pixel of an image
                                into a colored, positioned, 1px wide by 1px tall html &lt;div&gt; tag.
                            </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>
                            Example - <a href="http://paulishak.com/divimage.php?url=images/magicpw.png">http://paulishak.com/divimage.php?url=http://paulishak.tk/images/magicpw.png</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('divimage.php'));?></pre></div>
                            <div>
                                <h1>Mental note to self:</h1>
                                Investigate the possible use of css to render an image, using the box-shadow property.
                                <br>
                                example:<br>
                                box-shadow:66px 42px #518b41,30px 90px #518b41,84px 90px #518b41,<br>
                                102px 60px #518b41,48px 54px #518b41,60px 84px #518b41,<br>
                                90px 66px #518b41,72px 36px #518b41,36px 42px #518b41,<br>
                                42px 72px #518b41,48px 96px #518b41,60px 108px #518b41;<br>
                               
                            </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 = "[";
    $counter = 0;
    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;
            if($r==0){$bodyHTML.=",";}else{$bodyHTML.=",".$r;}
            if($g==0){$bodyHTML.=",";}else{$bodyHTML.=",".$g;}
            if($b==0){$bodyHTML.=",";}else{$bodyHTML.=",".$b;}
            $counter = $counter + 1;   
        }
    }
    $bodyHTML.="]";
    $bodyHTML = str_replace("[,","[",$bodyHTML);    
?>
<!DOCTYPE html>
<html>
    <head></head>
    <body style="background-color:#ffffff;"></body>
        <script>
            function pad(value, length)
            {
                return (value.toString().length < length) ? pad("0"+value, length):value;
            }
            function v(n)
            {
                if( typeof n === 'undefined' || n === null )
                {
                    return 0;
                }
                return n;
            }
            var bytes = <?php echo $bodyHTML;?>;
            var cols = <?php echo $cols?>;
            var rows = <?php echo $rows?>;
            var rowHeight = <?php echo $rowHeight?>;
            var colWidth = <?php echo $colWidth?>;
            var totalWidth = <?php echo $totalWidth?>;
            var totalHeight = <?php echo $totalHeight?>;
            var startX = 0;
            var startY = 0;
            bodyHTML = "";
            var counter = 0;
            for(var x=startX; x <=(totalWidth - colWidth + startX);x = x + colWidth)
            {
                for(var y=startY; y <=(totalHeight - rowHeight + startY);y = y + rowHeight)
                {
                    var r = bytes[counter];
                    var g = bytes[counter + 1];
                    var b = bytes[counter + 2];
                    bodyHTML += '<g style="position:absolute;width:'+ colWidth + 'px;height:' + rowHeight + 'px;left:' + x + 'px;top:' + y +'px;background-color:#' + pad(v(r).toString(16),2) + pad(v(g).toString(16),2) + pad(v(b).toString(16),2) + ';"></g>';            
                    counter = counter + 3;
                }
            }      
            document.body.innerHTML = bodyHTML;
        </script>
</html>

Mental note to self:

Investigate the possible use of css to render an image, using the box-shadow property.
example:
box-shadow:66px 42px #518b41,30px 90px #518b41,84px 90px #518b41,
102px 60px #518b41,48px 54px #518b41,60px 84px #518b41,
90px 66px #518b41,72px 36px #518b41,36px 42px #518b41,
42px 72px #518b41,48px 96px #518b41,60px 108px #518b41;