Create a Color Box Image GUI inside WEB

Question

I have been working on a web application that produces an image out of colours. Having multiple divs works, but the load time is slow and until the image loads it's time-taking. I would like to make a table like image with lots of colors extracted from an image and display them inside a web page. I don't know which language to use to create a color box other than the code I have, But I would like to get rid of divs and possibly make the GUI not in HTML but have it available in a browser!

My working code:

<style>div { display:inline-block;width:2.6px;height:2.6px; }</style>
<?PHP
$im = imagecreatefrompng('image.png');// open an image
$image = Array(); //array of colors
$image_x = 480; //image width
$image_y = 272; //image height
$x = 0; //x pixel in image
$y = 0; //y pixel im image
while ($x < $image_x && $y < $image_y) {
$start_x = $x;
$start_y = $y;
$color_index = imagecolorat($im, $start_x, $start_y);
$color_tran = imagecolorsforindex($im, $color_index);// make it human readable
array_push($image, join(',', $color_tran));
$x++;
if ($x > $image_x-1) {$x = 0;$y++;}
}
$i = 0;
foreach ($image as $color) {
$rgb = explode(",", $color);
if ($i > $image_x-1) {$i = 0;echo "<br>";}
echo "<div style='background-color:rgb(".implode(",",array_slice($rgb, 0, -1)).");'></div>";
$i++;
}
?>

Answer 1

I don't fully understand the purpose behind what you're doing so forgive me if I offer something that won't meet your needs.

It looks to me like what you want to do is use PHP to create a new image. Instead of echoing out divs, you can accomplish the same result by drawing filled rectangles into a new image created dynamically by PHP. Check out the PHP manual entry for imagefilledrectangle. http://php.net/manual/en/function.imagefilledrectangle.php

From there, depending on how you're serving the image, you can either output it as base64 in an html image tag, or you can simply dump it to the client with an image header. For the dumping option if you're not familiar, the image src would point to your PHP file which would have headers telling the browser it was getting content of type image/png.

The good part of doing it this way is that you're almost there already. You just need a new image to write to, and then code to output it. As an alternative though you might consider doing this completely in JavaScript. You can load the image after the page loads (for best user experience), and then draw the results onto an HTML canvas element. If you don't like the canvas, you could still use this method to reproduce your original div system.