MURASHIKI BLOG | ブログ 村式株式会社

HOME ALL INSIDE LEARN NEWS WORK 社長ブログ

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

Pocket

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);

この記事を書いた人

中川尚(メガネ)

東京生まれ。幼少期はサウジアラビアで世界各国の友人と過ごす。 早稲田大学・大学院では暗号の研究に従事。情報セキュリティの職を経て村式創業に参画。自然、宇宙、日本文化、音楽、芸術、数学、仏教、神道、テクノロジーなど人智を超えてそうなものに興味がある。 夜更けになると鎌倉の裏通りに繰り出し、地元の怪しい仲間たちと酒を酌み交わしている。

タグ一覧

ALL INSIDE LEARN NEWS TOP WORK 社長ブログ