SQLの窓

2014年10月31日


PHP : 既存 GD 関連ライブラリで、背景をグラデーション(2)






開始  終了 
タイプ 
ステップ  


ライブラリ関連のソースコードは、『PHP : 既存 GD 関連ライブラリで、背景をグラデーション』を参照して下さい。グラデーションクラスと、GD 基本クラスを紹介しています。

それらのクラスを使用して実行していますが、PHP 自体を画像としてブラウザに返すコードなので、ここでの実行は、IMG 要素の SRC 属性に QueryString を引き渡して随時実行しています。

※ 今回は、コードの中に他のサイトから実行した場合に以下の画像が表示されるようにするコードを付加しています。

( ▲ クリックすると、フリーフォントで簡単ロゴ作成に移動します )

example_02.php(UTF-8N)
<?php
// ***********************************************
//
//  プログラム名 : グラデーションサンプル(2)
//  作   成   者 : 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;
}
if ( $_GET['type'] == '' ) {
	$_GET['type'] = "horizontal";
}
if ( $_GET['sc'] == '' ) {
	$_GET['sc'] = "#000000";
}
if ( $_GET['ec'] == '' ) {
	$_GET['ec'] = "#ffffff";
}

// グラデーションキャンバスの作成
$gradient = new gd_gradient_fill(400,200,$_GET['type'],$_GET['sc'],$_GET['ec'],$_GET['step']+0);
// サイズ 400x200
$image = $gradient->image;

// GD インスタンス作成
$gd = new GD();

// PNG として設定
$gd->type = "PNG";
// グラデーションを設定
$gd->im = $image;

$site = false;
$target_sites = array("http://toolbox.winofsql.jp/","http://logicalerror.seesaa.net/");
foreach( $target_sites as $target ) {
	$len = strlen( $target );
	$ref = substr( $_SERVER['HTTP_REFERER'], 0, $len );
	if ( $target == $ref ) {
		$site = true;
		break;
	}
}

if ( $site ) {
	// ブラウザへ出力
	$gd->Response();
}
else {
	// ブラウザへ出力
	$gd->LoadPng("site_warning.png");
	$gd->Response();
}
?>


▼ このブログでの実装コード
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></"+"script>");
}
if ( window[window.location.hostname+'.loadModcoder'] !== true ) {
	window[window.location.hostname+'.loadModcoder'] = true;
	document.write("<"+"script src="http://homepage2.nifty.com/lightbox/modcoder_excolor/jquery.modcoder.excolor.js"></"+"script>");
}
</script>
<script type="text/javascript">
$(function(){
	$(".color_field").modcoder_excolor();
});

function set_gradient() {
	var src = "http://toolbox.winofsql.jp/gradient/example_02.php?step=" + $("#step").val();
	src += "&sc=" + encodeURIComponent($("#sc").val());
	src += "&ec=" + encodeURIComponent($("#ec").val());
	src += "&type=" + $("#gtype").val();
	$("#gradient").prop("src",src);
}
</script>

<style type="text/css">
.color_field {
	width: 80px;
}
</style>
<pre class=w6>
開始 <input id="sc" class="color_field" type="text" readonly value="#000000"> 終了 <input id="ec" class="color_field" type="text" readonly value="#ffffff">
タイプ <select id="gtype">
<option value="horizontal">horizontal</option>
<option value="vertical">vertical</option>
<option value="ellipse">ellipse</option>
<option value="ellipse2">ellipse2</option>
<option value="circle">circle</option>
<option value="circle2">circle2</option>
<option value="square">square</option>
<option value="diamond">diamond</option>
</select>
ステップ <input id="step" type="number" max="20" min="0" value="0"> <input type="button" value="グラデーション" onclick='set_gradient()'>
<img id="gradient" src="https://lh3.googleusercontent.com/-vhWb-RDtIR8/VFNVjqUJ8mI/AAAAAAAAXVU/7wyCb2JipJM/s400/gradient.png" style='border:solid 1px #000000;' onclick='set_gradient()'>
IE がまだ type="color" に対応していないので、カラーピッカーは jQuery のプラグインを使用しています


posted by lightbox at 2014-10-31 21:14 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり