PNG Verkleuren
Ik zit me een ongeluk te zoeken naar een script waarbij ik transparante PNG bestanden (bijv. images/back/back.png) kan verkleuren van bijvoorbeeld #444444 (grijs-zwart) naar bijvoorbeeld #ff6600 (oranje).
Deze wil ik op de volgende manier kunnen inladen:
<img src="colorize.php?img=images/back/back.png" alt="" />
Iemand die me kan helpen?
Ik ben zo'n beetje ten einde raad.
Alvast bedankt
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
// PAD NAAR DE AFBEELDING
$switchColorImage = "images/back/back.png";
// MAAK EEN NIEUWE AFBEELDING
$image = imagecreatefrompng($switchColorImage);
imagetruecolortopalette($image,false, 255);
// KLEUR DIE GEWISSELD MOET WORDEN
$switchColor = imagecolorclosest($image, 255, 255, 255);
// NIEUWE KLEUR
imagecolorset($image, $switchColor, 255, 128, 0);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>
// PAD NAAR DE AFBEELDING
$switchColorImage = "images/back/back.png";
// MAAK EEN NIEUWE AFBEELDING
$image = imagecreatefrompng($switchColorImage);
imagetruecolortopalette($image,false, 255);
// KLEUR DIE GEWISSELD MOET WORDEN
$switchColor = imagecolorclosest($image, 255, 255, 255);
// NIEUWE KLEUR
imagecolorset($image, $switchColor, 255, 128, 0);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>
Zie ook: http://www.phphulp.nl/php/forum/topic/script-review-class-watermerk-zoals-1001-anderen/81928/1/#620286
Gewijzigd op 09/09/2012 10:07:13 door G P
Het enige probleem op 't moment is nu dat echt letterlijk maar één bepaalde kleur verkleurd wordt, en dat de randen niet mooi meer zijn.
Voor:
Na:
Is daar ook nog een oplossing voor?
Alvast bedankt
Of je doet voor iedere tint individueel een andere tint instellen.
Of je kijkt wat er nu eigenlijk verschuift in de kleur ruimte. Voor dit tweede staat een algoritme beneden beschreven.
Persoonlijk vind ik RGB kleurruimte niet zo fijn voor dit soort bewerkingen dus gebruik ik liever HSL (zoek maar op).
Stap 1:
Bereken de H, S, L verschuiving van je originele kleur (zwart) naar je nieuwe kleur (oranje).
Let op: in het het geval van zwart #000000 en een iets lichtere tint #010101 kan het zijn dat er totaal andere Hue values bijhoren. Dit valt niet te zien omdat Lightness helemaal laag staat. In dit geval stel zelf een (statisch) Hue in.
Stap 2:
Laad alle tinten van je originele plaatje in een array.
Stap 3:
Bereken voor alle tinten de nieuwe HSL doormiddel van de eerder berekend verschuiving.
Stap 4:
Je krijgt een array uit van alle nieuwe tinten. Vervang nu alle originele tinten door de nieuwe tinten.
----
In het geval dat je plaatje complexer wordt (je hebt nu alleen zwart/wit). Maar stel je hebt die zwarte pijl met een rood bolletje en je wilt alleen het zwart oranje maken. Dan moet je dat rode bolletje niet meenemen in je array van originele tinten. Dit kan je doen door te filteren op bepaalde Hue waardes of andere parameters waar je kleur buiten moet vallen. Zo kan je bijvoorbeeld ook alle lichte delen van een foto van kleur veranderen en de donkere met rust laten.
Je zou eens naar alle functies moeten kijken die GD sowieso al ondersteund of libraries van andere mensen. Waarschijnlijk is de functionaliteit die je zoekt al ergens geimplementeerd.
Gewijzigd op 09/09/2012 14:52:41 door Flip --
http://rcsdesign.nl/amx/color/index.php
index.php
Code (php)
color.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$switchColorImage = "back.png";
$image = imagecreatefrompng($switchColorImage);
imagetruecolortopalette($image,false, 255);
$switchColor = imagecolorclosest($image, 68, 68, 68);
imagecolorset($image, $switchColor, 255, 128, 0);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>
$switchColorImage = "back.png";
$image = imagecreatefrompng($switchColorImage);
imagetruecolortopalette($image,false, 255);
$switchColor = imagecolorclosest($image, 68, 68, 68);
imagecolorset($image, $switchColor, 255, 128, 0);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>
Zou het aan de GD versie liggen?
Gewijzigd op 09/09/2012 16:31:43 door Robin S
imagetruecolortopalette($image,false, 255);
eens te wijzigen door
imagetruecolortopalette($image,true, 216);
Laat me dan weten of het lukt, of niet lukt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
// PAD NAAR DE AFBEELDING
$switchColorImage = "back.png";
// MAAK EEN NIEUWE AFBEELDING
$image = imagecreatefrompng($switchColorImage);
imagetruecolortopalette($image,true, 216);
// KLEUR 1 DIE GEWISSELD MOET WORDEN
$switchColor = imagecolorclosest($image, 0, 0, 0);
imagecolorset($image, $switchColor, 255, 128, 0);
// KLEUR 2 DIE GEWISSELD MOET WORDEN
$switchColor = imagecolorclosest($image, 42, 42, 42);
imagecolorset($image, $switchColor, 255, 128, 0);
// KLEUR 3 DIE GEWISSELD MOET WORDEN
$switchColor = imagecolorclosest($image, 84, 84, 84);
imagecolorset($image, $switchColor, 255, 128, 0);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>
// PAD NAAR DE AFBEELDING
$switchColorImage = "back.png";
// MAAK EEN NIEUWE AFBEELDING
$image = imagecreatefrompng($switchColorImage);
imagetruecolortopalette($image,true, 216);
// KLEUR 1 DIE GEWISSELD MOET WORDEN
$switchColor = imagecolorclosest($image, 0, 0, 0);
imagecolorset($image, $switchColor, 255, 128, 0);
// KLEUR 2 DIE GEWISSELD MOET WORDEN
$switchColor = imagecolorclosest($image, 42, 42, 42);
imagecolorset($image, $switchColor, 255, 128, 0);
// KLEUR 3 DIE GEWISSELD MOET WORDEN
$switchColor = imagecolorclosest($image, 84, 84, 84);
imagecolorset($image, $switchColor, 255, 128, 0);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>
Gewijzigd op 09/09/2012 16:42:11 door G P
http://rcsdesign.nl/amx/color/index.php
Zou het misschien aan de transparantie liggen van sommige pixels?
@Ozzie PHP: Mijn website verandert random van kleur. Het leek me een leuk idee om sommige afbeeldingen mee te laten verkleuren. Ik heb echter geen zin om voor elke kleur een plaatje te moeten maken ;-)
Je moet je goed afvragen of je dit wel wil. In de jaren '90 was zo'n effect misschien nog leuk, maar tegenwoordig niet meer. Het is achterhaald. Het is juist erg irritant als een website telkens van kleur verandert.
Daarnaast... als je telkens plaatjes gaat genereren gaat dit ten koste van je performance en wordt je site trager.
Kortom, ik zou het niet doen.
Dat kan prima met een rondje en een pijltje. Leuk lettertype zoeken (kan je zelf maken: dan ook gewoon vector-bestanden als 'letter'.
Letter kan je met color: orange; heel simpel kleuren.
Google maar eens op custom font with own images.
Even je eigen lettertype includen, type een "T" (van terug oid) waarin de 'letter' T als een pijltje met een rondje erom om heen wordt weergeven. En lettertype-kleuren werken spontaan.
O zo makkelijk!
Even snel wat voor je gemaakt: http://jsfiddle.net/Prbku/
Iets meer effect: http://jsfiddle.net/Prbku/1/
Gewijzigd op 09/09/2012 20:34:03 door Eddy E
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// PAD NAAR DE AFBEELDING
$switchColorImage = "back.png";
// MAAK EEN NIEUWE AFBEELDING
$image = imagecreatefrompng($switchColorImage);
$red = 255;
$green = 128;
$blue = 0;
imagefilter($image, IMG_FILTER_COLORIZE, $red, $green, $blue, 0);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>
// PAD NAAR DE AFBEELDING
$switchColorImage = "back.png";
// MAAK EEN NIEUWE AFBEELDING
$image = imagecreatefrompng($switchColorImage);
$red = 255;
$green = 128;
$blue = 0;
imagefilter($image, IMG_FILTER_COLORIZE, $red, $green, $blue, 0);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>
Ik denk dat ik afbeeldingen dan maar gewoon één vaste kleur laat, net wat Ozzie voorstelt.
Desalniettemin bedankt voor de hulp :)
A List Apart doet het ook. Minimaal, maar net zichtbaar genoeg.
www.online-bijbel.nl doet het ook: niet hinderlijk, wel even net subtiel dat andere tintje.
Kortom: wel doorgaan. Maar hoeveel kleuren wil je? 3? Pak photoshop.
30? Neem CSS.