Zjištění barvy obrázku

V řadě případů se může hodit automaticky určit barvu obrázku:

  1. určení barvy produktu v e-shopu,
  2. nastavení barvy ladící k obrázku,
  3. určení barvy kontrastní k obrázku

Zjištění barvy v JavaScriptu

V JavaScriptu je nejsnazší použít <canvas> – nakreslit do něj zkoumaný obrázek zmenšený do velikosti 1 × 1. Barva tohoto pixelu potom bude něco jako průměrná barva obrázku (ve skutečnosti záleží na použitém algoritmu pro zmenšování obrázků).

Je nutné, aby obrázek byl ze stejné domény nebo zapsaný pomocí data URL. Ukázka pro několik obrázků:

Živá ukázka

Dominantní barva

Zjistit průměrnou barvu obrázku nemusí být vždy úplně ideální. V případě hodně kontrastního obrázku budou průměrné barvě vzdáleny obě barvy.

Proto je zajímavější hledat převládající barvu. Případně některé barvy ignorovat – pokud jsou například obrázky produktů focené na bílém pozadí, je ideální toto pozadí nebrat v úvahu.

PHP

Implementace hledání dominantní barvy existují i v PHP:

Jak je vidět na výsledku, zjištění dominantní barvy přináší lepší výsledky:

Dominantní barva obrázku

Kromě převládající barvy jde zjistit i barevnou paletu obrázku:

Barevná paleta obrázku

Zjistit převládající barvu může být hodně výpočetně náročné.

Pokud obrázky nahrává uživatel, nabízí se využít jeho výpočetní výkon a barvu určovat na straně klienta pomocí JavaScriptu.

Průměrná barva v PHP

Výpočetně rychlejší je zjištění průměrné barvy a někdy mohou být výsledky uspokojivé. Jde toho docílit projitím všech pixelů JPG obrázku.

function averageColor($sourceImage) {
	$image = imagecreatefromjpeg($sourceImage);
	$colors = array("r" => 0, "g" => 0, "b" => 0);
	$total = 0;
	for ($x = 0; $x < imagesx($image); $x++) {
		for ($y = 0; $y < imagesy($image); $y++) {
			$rgb = imagecolorat($image, $x, $y);
			$colors["r"] += ($rgb >> 16) & 0xFF;
			$colors["g"] += ($rgb >> 8) & 0xFF;
			$colors["b"] += $rgb & 0xFF;
			$total++;
		}
	}
	return array(
		round($colors["r"] / $total),
		round($colors["g"] / $total),
		round($colors["b"] / $total)
	);
}

Použití:

<?php
$sourceImage = "obrazek.jpg";
$color = averageColor($sourceImage);
?>
<img src="<?=$sourceImage?>" style="
	background: rgb(<?=implode(',', $color)?>)
">

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Lazy loading obrázků

Lazy loading obrázků

Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.

Drag & Drop upload obrázků

Drag & Drop upload obrázků

Všechny možnosti nahrávání obrázků ze schránky a pomocí drag & drop.

Slideshow obrázků

Plynulá změna obrázků

Jak na stránce automaticky plynule měnit obrázky.

Generování PDF

Generování PDF

Vytváření PDF dokumentů v JavaScriptu a PHP.

Offline webová stránka

Offline webová stránka

Jak umožnit návštěvníkům stažení celé webové stránky pro prohlížení offline, umístění na CD apod.

Komentáře