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++;
}
?>

• janos: How come all the code layout is all flat, how come there are no indentations at all?
• SuperBiasedMan: Welcome to Code Review! I tagged your post with PHP. Please always tag a post with the language you're using, it makes it a lot easier for the right people to find your post.
• MHakvoort: I edited your code and added indentations.
• SuperBiasedMan: @MHakvoort Please don't as that prevents reviewers from being able to suggest formatting improvements. See this meta post.
• user4316754: Any Way to Get what I want the code to do?

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.