開始 終了 タイプ ステップライブラリ関連のソースコードは、『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 のプラグインを使用しています
|
|
【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 をテストする為の初心者用フォーム
