/    Sign up×
Community /Pin to ProfileBookmark

PHP Problem

Copy linkTweet thisAlerts:
Jun 05.2008

HI

I have been asked to provide a solution to this problem as part of the selection process for a job. I have limited experience of PHP, however when I told my potential employer this they were happy for me to spend some time researching the following problem:

“We have a dynamic online magazine. Each page of the magazine contains an image and an article. Your problem is to dynamically colour the article text and the article background to match the colours that are present in the image, making considerations for readability and accessibility. Justify your choice of colour and explain any extensions to this that you feel would enhance the solution.”

I take this means the colours used have to come from the image so that pastel colours are used for the background and contrasting colours are used for the foreground text? If someone with more experience with PHP could provide any assistance on how to go about this it would be appreciated.

Thanks
Jeremy

to post a comment
PHP

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@TheBearMayJun 05.2008 — There are probably better ways since I don't do a whole lot of image manipulation, but looking over the image functions available in PHP imagecolorat looks like a good candidate to start with. Combine that with imagecolorstotal and imagecolorsforindex and I can see a method to construct an array of the colors present in the image.
Copy linkTweet thisAlerts:
@jeremybrownauthorJun 12.2008 — Thanks NogDog, that link was really useful.

I have been able to pull two colours from the image and apply them as background colours. What I want is the first colour to be used as the background colour and the second colour as the text colour. The image is also to be displayed beside the text.

What I've got so far www.setapart.co.uk/colours.php

I'm not sure how you make sure the colours are readable/accessible but I'm guessing the colour hex codes will need to be between a certain range of colours so maybe you check the first letter or something?
Copy linkTweet thisAlerts:
@jeremybrownauthorJun 12.2008 — code so far:

[code=php]<?php
function colorPalette($imageFile, $numColors, $granularity = 5)
{
$granularity = max(1, abs((int)$granularity));
$colors = array();
$size = @getimagesize($imageFile);
if($size === false)
{
user_error("Unable to get image size data");
return false;
}
$img = @imagecreatefromjpeg($imageFile);
if(!$img)
{
user_error("Unable to open image file");
return false;
}
for($x = 0; $x < $size[0]; $x += $granularity)
{
for($y = 0; $y $size[1]; $y += $granularity)
{
$thisColor = imagecolorat($img, $x, $y);
$rgb = imagecolorsforindex($img, $thisColor);
$red = round(round(($rgb['red'] / 0x33)) * 0x33);
$green = round(round(($rgb['green'] / 0x33)) * 0x33);
$blue = round(round(($rgb['blue'] / 0x33)) * 0x33);
$thisRGB = sprintf('%02X%02X%02X', $red, $green, $blue);
if(array_key_exists($thisRGB, $colors))
{
$colors[$thisRGB]++;
}
else
{
$colors[$thisRGB] = 1;
}
}
}
arsort($colors);
return array_slice(array_keys($colors), 0, $numColors);
}
// sample usage:
$palette = colorPalette('MOURNES1.JPG', 2, 4);
echo "<table>n";
foreach($palette as $color)
{
echo "<tr>
<td style='background-color:#$color;width:20em;color:#fff;'>Morbi feugiat mauris at velit. Proin rutrum lectus. Proin pulvinar turpis tempor nibh. Cras sit amet magna sed risus tempor vestibulum. Nunc vitae nulla. Vivamus fermentum. Praesent a sem. Cras eu neque ultricies tellus tristique vehicula. Praesent dignissim consequat metus. Integer dolor. Donec pellentesque, libero eu ullamcorper suscipit, lorem augue molestie arcu, vitae sodales quam nulla vel urna. Suspendisse accumsan sem nec leo. Proin dui ante, placerat id, consectetuer et, gravida in, velit. Duis non massa. Etiam mollis. Vestibulum id est. Sed sit amet tellus. Vestibulum varius dolor vitae velit.</td>
<td><img src='$imageFile' alt='photograph' /></td>
</tr>n";
}
echo "</table>n"; [/code]
Copy linkTweet thisAlerts:
@NogDogJun 12.2008 — You might want to find the X most commonly used colors, then from that list take the color with the lowest total RBG values and that with the highest. Of course, if the image has very little overall contrast to begin with, you may still have a problem.
×

Success!

Help @jeremybrown spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...