2010.2.12

GDで高速にグラデーションを作る

村式ブログ

download.jpg

PHPのGDには残念ながらグラデーションを扱うメソッドがありません。
1pxずつ計算して塗りつぶしていくこともできますが、計算量が大きくなってしまいます。
そこで、グラデーションマスク画像を先に作っておいてそれと合成するという方法を取りました。

黄色からオレンジのグラデーションを作る場合の手順は以下のようになります。

1.事前に #007F7F7F(100%非透過) ~ #7F7F7F7F(透明)のグラデーション画像をアルファチャネル付きの24bit-PNGで作る。
mask.jpg

2.黄色、オレンジで塗りつぶした画像リソースを1枚ずつ作る
yellow.jpg orange.jpg

3.黄色画像をIMG_EFFECT_OVERLAYモードにして、(1)で作ったグラデーション画像を合成する(マスクがかかる)
yellow1.jpg

4.オレンジ画像に(3)の画像を通常のピクセルブレンディングモード(IMG_EFFECT_NORMAL)で合成する
download.jpg

ここで肝となるのはimagelayereffectメソッドでIMG_EFFECT_OVERLAYを使用するところです。
IMG_EFFECT_OVERLAY の説明を見ると、このように書かれています。

オーバーレイを使用すると、背景の黒い部分は黒のまま。 一方背景の白い部分は白のままとなります。 背景のグレーな部分は、前景のピクセルの色となります。

http://php.net/manual/ja/function.imagelayereffect.php

これを受けて(1)では #007F7F7F(100%非透過) ~ #7F7F7F7F(透明) の画像を作っています。

サンプルコード
(※簡単のため余計な処理は省いています)

$w = 400; $h = 210;  $yellow = imagecreatetruecolor($w, $h); $orange = imagecreatetruecolor($w, $h); $mask = imagecreatefrompng('mask.png'); // マスク画像  // 黄色、オレンジの画像を作る imagefill($yellow, 0, 0, 0x00FFFF00);// 黄色 imagefill($orange, 0, 0, 0x00FF6600);// オレンジ  // 黄色画像にマスクをかける imagelayereffect($yellow, IMG_EFFECT_OVERLAY); imagecopy($yellow, $mask, 0, 0, 0, 0, $w, $h);  // オレンジ色画像のモードはデフォルト(IMG_EFFECT_NORMAL)のままマスクした黄色画像を載せる imagelayereffect($orange, IMG_EFFECT_NORMAL);// (この行は書かなくても同じ) imagecopy($orange, $yellow, 0, 0, 0, 0, $w, $h);  header('Content-Type: image/png'); imagepng($orange);  imagedestroy($yellow); imagedestroy($orange); imagedestroy($mask);

この記事を書いた人

中川尚(メガネ)