画像そのものを php で作成しています。クリックすると、img 要素の中の src の URLに渡す step パラメータが変化します。 ▼ クリックするとグラデーションをテストできます。
ステップ( せっかくなので、step の入力は HTML5 の type="number" を使用してます / max="20" ) この間作成した、GD を使用した画像の縮小ライブラリと、『PHP and GD : Emulate Gradient Fill』からダウンロードできるグラデーション用ライブラリを使用して GD の背景としてグラデーションを設置するサンプルです。 Emulate Gradient Fill は、そのままでは使え無いので、74行目をコメントにする必要があります。また、テストしやすいようにコンストラクタの引数に全てデフォルトを設定しています。 ※ このライブラリは、英語しか使われていないので、そのままで結構ですが、画像の縮小ライブラリと実行サンプルは、UTF-8N で保存しています。 gd_gradient_fill
<?php
/*
Script Name: GD Gradient Fill
Script URI: http://planetozh.com/blog/my-projects/images-php-gd-gradient-fill/
Description: Creates a gradient fill of any shape (rectangle, ellipse, vertical, horizontal, diamond)
Author: Ozh
Version: 1.1
Author URI: http://planetozh.com/
*/
/* Release history :
* 1.1
* - changed : more nicely packaged as a class
* - fixed : not displaying proper gradient colors with image dimension greater than 255 (because of a limitation in imagecolorallocate)
* - added : optional parameter 'step', more options for 'direction'
* 1.0
* - initial release
*/
/* Usage :
*
* require_once('/path/to/gd-gradient-fill.php');
* $image = new gd_gradient_fill($width,$height,$direction,$startcolor,$endcolor,$step);
*
* Parameters :
* - width and height : integers, dimesions of your image.
* - direction : string, shape of the gradient.
* Can be : vertical, horizontal, rectangle (or square), ellipse, ellipse2, circle, circle2, diamond.
* - startcolor : string, start color in 3 or 6 digits hexadecimal.
* - endcolor : string, end color in 3 or 6 digits hexadecimal.
* - step : integer, optional, default to 0. Step that breaks the smooth blending effect.
* Returns a resource identifier.
*
* Examples :
*
* 1.
* require_once('/home/ozh/www/includes/gd-gradient-fill.php');
* $image = new gd_gradient_fill(200,200,'horizontal','#fff','#f00');
*
* 2.
* require_once('c:/iis/inet/include/gd-gradient-fill.php');
* $myimg = new gd_gradient_fill(80,20,'diamond','#ff0010','#303060');
*
*/
// Test it :
// $image = new gd_gradient_fill(400,200,'ellipse','#f00','#000',0);
class gd_gradient_fill {
// Constructor. Creates, fills and returns an image
function gd_gradient_fill($w=400,$h=200,$d="horizontal",$s="#000000",$e="#FFFFFF",$step=0) {
$this->width = $w;
$this->height = $h;
$this->direction = $d;
$this->startcolor = $s;
$this->endcolor = $e;
$this->step = intval(abs($step));
// Attempt to create a blank image in true colors, or a new palette based image if this fails
if (function_exists('imagecreatetruecolor')) {
$this->image = imagecreatetruecolor($this->width,$this->height);
} elseif (function_exists('imagecreate')) {
$this->image = imagecreate($this->width,$this->height);
} else {
die('Unable to create an image');
}
// Fill it
$this->fill($this->image,$this->direction,$this->startcolor,$this->endcolor);
// Show it
// $this->display($this->image);
// Return it
return $this->image;
}
// Displays the image with a portable function that works with any file type
// depending on your server software configuration
function display ($im) {
if (function_exists("imagepng")) {
header("Content-type: image/png");
imagepng($im);
}
elseif (function_exists("imagegif")) {
header("Content-type: image/gif");
imagegif($im);
}
elseif (function_exists("imagejpeg")) {
header("Content-type: image/jpeg");
imagejpeg($im, "", 0.5);
}
elseif (function_exists("imagewbmp")) {
header("Content-type: image/vnd.wap.wbmp");
imagewbmp($im);
} else {
die("Doh ! No graphical functions on this server ?");
}
return true;
}
// The main function that draws the gradient
function fill($im,$direction,$start,$end) {
switch($direction) {
case 'horizontal':
$line_numbers = imagesx($im);
$line_width = imagesy($im);
list($r1,$g1,$b1) = $this->hex2rgb($start);
list($r2,$g2,$b2) = $this->hex2rgb($end);
break;
case 'vertical':
$line_numbers = imagesy($im);
$line_width = imagesx($im);
list($r1,$g1,$b1) = $this->hex2rgb($start);
list($r2,$g2,$b2) = $this->hex2rgb($end);
break;
case 'ellipse':
$width = imagesx($im);
$height = imagesy($im);
$rh=$height>$width?1:$width/$height;
$rw=$width>$height?1:$height/$width;
$line_numbers = min($width,$height);
$center_x = $width/2;
$center_y = $height/2;
list($r1,$g1,$b1) = $this->hex2rgb($end);
list($r2,$g2,$b2) = $this->hex2rgb($start);
imagefill($im, 0, 0, imagecolorallocate( $im, $r1, $g1, $b1 ));
break;
case 'ellipse2':
$width = imagesx($im);
$height = imagesy($im);
$rh=$height>$width?1:$width/$height;
$rw=$width>$height?1:$height/$width;
$line_numbers = sqrt(pow($width,2)+pow($height,2));
$center_x = $width/2;
$center_y = $height/2;
list($r1,$g1,$b1) = $this->hex2rgb($end);
list($r2,$g2,$b2) = $this->hex2rgb($start);
break;
case 'circle':
$width = imagesx($im);
$height = imagesy($im);
$line_numbers = sqrt(pow($width,2)+pow($height,2));
$center_x = $width/2;
$center_y = $height/2;
$rh = $rw = 1;
list($r1,$g1,$b1) = $this->hex2rgb($end);
list($r2,$g2,$b2) = $this->hex2rgb($start);
break;
case 'circle2':
$width = imagesx($im);
$height = imagesy($im);
$line_numbers = min($width,$height);
$center_x = $width/2;
$center_y = $height/2;
$rh = $rw = 1;
list($r1,$g1,$b1) = $this->hex2rgb($end);
list($r2,$g2,$b2) = $this->hex2rgb($start);
imagefill($im, 0, 0, imagecolorallocate( $im, $r1, $g1, $b1 ));
break;
case 'square':
case 'rectangle':
$width = imagesx($im);
$height = imagesy($im);
$line_numbers = max($width,$height)/2;
list($r1,$g1,$b1) = $this->hex2rgb($end);
list($r2,$g2,$b2) = $this->hex2rgb($start);
break;
case 'diamond':
list($r1,$g1,$b1) = $this->hex2rgb($end);
list($r2,$g2,$b2) = $this->hex2rgb($start);
$width = imagesx($im);
$height = imagesy($im);
$rh=$height>$width?1:$width/$height;
$rw=$width>$height?1:$height/$width;
$line_numbers = min($width,$height);
break;
default:
}
for ( $i = 0; $i < $line_numbers; $i=$i+1+$this->step ) {
// old values :
$old_r=$r;
$old_g=$g;
$old_b=$b;
// new values :
$r = ( $r2 - $r1 != 0 ) ? intval( $r1 + ( $r2 - $r1 ) * ( $i / $line_numbers ) ): $r1;
$g = ( $g2 - $g1 != 0 ) ? intval( $g1 + ( $g2 - $g1 ) * ( $i / $line_numbers ) ): $g1;
$b = ( $b2 - $b1 != 0 ) ? intval( $b1 + ( $b2 - $b1 ) * ( $i / $line_numbers ) ): $b1;
// if new values are really new ones, allocate a new color, otherwise reuse previous color.
// There's a "feature" in imagecolorallocate that makes this function
// always returns '-1' after 255 colors have been allocated in an image that was created with
// imagecreate (everything works fine with imagecreatetruecolor)
if ( "$old_r,$old_g,$old_b" != "$r,$g,$b")
$fill = imagecolorallocate( $im, $r, $g, $b );
switch($direction) {
case 'vertical':
imagefilledrectangle($im, 0, $i, $line_width, $i+$this->step, $fill);
break;
case 'horizontal':
imagefilledrectangle( $im, $i, 0, $i+$this->step, $line_width, $fill );
break;
case 'ellipse':
case 'ellipse2':
case 'circle':
case 'circle2':
imagefilledellipse ($im,$center_x, $center_y, ($line_numbers-$i)*$rh, ($line_numbers-$i)*$rw,$fill);
break;
case 'square':
case 'rectangle':
imagefilledrectangle ($im,$i*$width/$height,$i*$height/$width,$width-($i*$width/$height), $height-($i*$height/$width),$fill);
break;
case 'diamond':
imagefilledpolygon($im, array (
$width/2, $i*$rw-0.5*$height,
$i*$rh-0.5*$width, $height/2,
$width/2,1.5*$height-$i*$rw,
1.5*$width-$i*$rh, $height/2 ), 4, $fill);
break;
default:
}
}
}
// #ff00ff -> array(255,0,255) or #f0f -> array(255,0,255)
function hex2rgb($color) {
$color = str_replace('#','',$color);
$s = strlen($color) / 3;
$rgb[]=hexdec(str_repeat(substr($color,0,$s),2/$s));
$rgb[]=hexdec(str_repeat(substr($color,$s,$s),2/$s));
$rgb[]=hexdec(str_repeat(substr($color,2*$s,$s),2/$s));
return $rgb;
}
}
?>
今回のサンプルでは、step だけを変更できるようにしました。step は、デフォルトでは 0 を使用してなめらかなグラデーションになりますが、大きくする事によって、縦の縞模様の幅が広くなっていきます。( 特別なデザインで必要な場合以外使用する事は無いと思います ) example_01.php
<?php
// ***********************************************
//
// プログラム名 : グラデーションサンプル(1)
// 作 成 者 : lightbox
// 作 成 日 : 2014/10/31
//
// 概要 :
// 背景画像としてのグラデーション
//
// ***********************************************
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );
require_once('gd_lightbox.php');
require_once('gradient.php');
// ステップの範囲を限定
if ( $_GET['step']+0 > 20 ) {
$_GET['step'] = 20;
}
if ( $_GET['step']+0 < 0 ) {
$_GET['step'] = 0;
}
// グラデーションキャンバスの作成
$gradient = new gd_gradient_fill(400,200,"horizontal","#000000","#FFFFFF",$_GET['step']+0);
// 1) 400x200
// 2) horizontal
// 3) 黒から白へ
$image = $gradient->image;
// GD インスタンス作成
$gd = new GD();
// PNG として設定
$gd->type = "PNG";
// グラデーションを設定
$gd->im = $image;
// PNGファイルとして出力
//$gd->SavePng("example_01.png");
// JPEGファイルとして出力( 第二引数を省略すると 75 )
//$gd->SavePng("example_01.jpg",90);
// ブラウザへ出力
$gd->Response();
?>
※ 画像として保存する処理をコメントにしています gd_lightbox.php
<?php
# ***********************
# クラス
# ***********************
class GD {
var $im;
var $type;
# ***********************
# コンストラクタ
# ***********************
function GD( ) {
}
# ***********************
# キャンバス作成
# ***********************
function CreateCanvas( $Width, $Height, $Type="PNG" ) {
$this->type = $Type;
$this->im = imagecreatetruecolor($Width, $Height);
}
# ***********************
# PNG ロード
# ***********************
function LoadPng( $Target ) {
$this->type = "PNG";
$this->im = ImageCreateFromPng($Target);
}
# ***********************
# JPEG ロード
# ***********************
function LoadJpeg( $Target ) {
$this->type = "JPEG";
$this->im = ImageCreateFromJpeg($Target);
}
# ***********************
# 色リソース作成
# ***********************
function CreateColor( $Red, $Green, $Blue ) {
$ret = ImageColorAllocate (
$this->im,
$Red, $Green, $Blue );
return $ret;
}
# ***********************
# 線幅設定
# ***********************
function SetLineWidth( $Width ) {
ImageSetThickness( $this->im, $Width );
}
# ***********************
# 直線の描画
# ***********************
function Line( $x1, $y1, $x2, $y2, $Option ) {
if ( is_array( $Option ) ) {
ImageSetStyle( $this->im, $Option );
ImageLine(
$this->im, $x1, $y1, $x2, $y2, IMG_COLOR_STYLED );
}
else {
ImageLine(
$this->im, $x1, $y1, $x2, $y2, $Option );
}
}
# ***********************
# 矩形の描画
# ***********************
function Box( $x, $y, $w, $h, $Color, $fill=FALSE ) {
if ( $fill ) {
imageFilledRectAngle(
$this->im, $x, $y, $x+$w, $y+$h, $Color );
}
else {
ImageRectAngle(
$this->im, $x, $y, $x+$w, $y+$h, $Color );
}
}
# ***********************
# 楕円の描画
# ***********************
function Arc( $x, $y, $w, $h, $Color ) {
ImageArc( $this->im, $x, $y, $w, $h, 0, 359, $Color );
}
# ***********************
# ブラウザへ出力
# ***********************
function Response( ) {
switch( $this->type ) {
case "PNG":
header('Content-Type: image/png');
ImagePng( $this->im );
break;
case "JPEG":
header('Content-Type: image/jpeg');
ImageJpeg( $this->im );
break;
}
}
# ***********************
# PNG 保存
# ***********************
function SavePng( $FilePath ) {
ImagePng( $this->im, $FilePath );
}
# ***********************
# JPEG 保存
# ***********************
function SaveJpeg( $FilePath, $Quality=75 ) {
ImageJpeg( $this->im, $FilePath, $Quality );
}
# ***********************
# 色リソース開放
# ***********************
function DestroyColor( $Color ) {
ImageColorDeallocate( $this->im, $Color );
}
# ***********************
# イメージの破棄
# ***********************
function Destroy( ) {
ImageDestroy ( $this->im );
}
# ***********************
# 伸縮された新しいイメージの作成
# ***********************
function Copy( &$New, $rate ) {
$w = ImageSx( $this->im );
$h = ImageSy( $this->im );
$New = new GD();
$New->im = ImageCreateTrueColor( $w * $rate, $h * $rate );
$w2 = ImageSx( $New->im );
$h2 = ImageSy( $New->im );
ImageCopyResampled(
$New->im,
$this->im,
0,0,0,0,
$w2, $h2,
$w, $h
);
$New->type = $this->type;
}
function CopyW( &$New, $w_new ) {
$w = ImageSx( $this->im );
$rate = $w_new / $w;
$h = ImageSy( $this->im );
$New = new GD();
$New->im = ImageCreateTrueColor( $w_new, $h * $rate );
$w2 = ImageSx( $New->im );
$h2 = ImageSy( $New->im );
ImageCopyResampled(
$New->im,
$this->im,
0,0,0,0,
$w2, $h2,
$w, $h
);
$New->type = $this->type;
}
function CopyH( &$New, $h_new ) {
$w = ImageSx( $this->im );
$h = ImageSy( $this->im );
$rate = $h_new / $h;
$New = new GD();
$New->im = ImageCreateTrueColor( $w * $rate, $h_new );
$w2 = ImageSx( $New->im );
$h2 = ImageSy( $New->im );
ImageCopyResampled(
$New->im,
$this->im,
0,0,0,0,
$w2, $h2,
$w, $h
);
$New->type = $this->type;
}
function CopyWH( &$New, $w_new, $h_new ) {
$w = ImageSx( $this->im );
$h = ImageSy( $this->im );
$New = new GD();
$New->im = ImageCreateTrueColor( $w_new, $h_new );
$w2 = ImageSx( $New->im );
$h2 = ImageSy( $New->im );
ImageCopyResampled(
$New->im,
$this->im,
0,0,0,0,
$w2, $h2,
$w, $h
);
$New->type = $this->type;
}
}
?>
|
|
【PHP + WEBアプリの最新記事】
- PHP : $.ajax でアップロード( 画像限定 ) / ファイルアップロード ver.3
- PHP : 選択した画像の表示 / ファイルアップロード ver.2
- PHP : ファイルアップロード ver.1
- 超簡易掲示板 ( JSON ) : PHP / CSS でスマホ用レスポンシブ対応
- PHP : 曲線が必要ならば ImageMagick ( 但し使えるかどうかはサーバー次第 )
- GD で画像縮小。『1) 単純縮小、2) 幅にあわす 3) 高さにあわす 4) 任意の幅と高さ』をその他の処理も含めてクラスでまとめ( class GD )
- PHP : 超簡易ログ
- PHP + MySQL + IFRAME + Bootstrap : 問い合せ WEB アプリテンプレート
- Windows で Laravel を試す際、PHP の Windows バージョンが 5.6.30 なので、Laravel 5.2 をインストールします
- Laravel を試す為に Windows に Composer をインストール
- スマホ対応、サーバインデックス表示パッケージ( jQuery + Bootstrap(css) + mmenu + PHP )
- 超簡易掲示板 : 保存タイプは CSV
- PHP による『超簡易掲示板』 / アプリケーションからの POST 検証用
- PHP : 既存 GD 関連ライブラリで、背景をグラデーション(２)
- PHP : 入力値のデバッグ
- PHP : ImageMagick : 背景が透過する画像を作成
- PHP雛型(２会話DB更新処理) : MySQL、XMLHttpRequest、XML、JSON、Canvas
- PHP をテストする為の初心者用フォーム
