画像に文字(テキスト)を書き込む

//ヘッダーでimg画像であることを宣言
header("Content-Type: image/png");
//新規イメージオブジェクトの生成
$img = imagecreate(300, 300);
//カラー情報を付与
$white = imagecolorallocate($img, 255, 255, 255);
$black = imagecolorallocate($img, 0, 0, 0);
//表示するテキストを用意
$text = mb_convert_encoding('Hello world!','UTF-8','auto');
//ttfファイルへのリンク(要ttfファイル)
$font = 'ipagp.ttf';
//リソース、フォントサイズ、アングル(回転)、x座標、y座標(フォントペースライン)、フォント、テキスト
imagettftext($img,24,0,5,30,$black,$font,$text);
//書き出し
imagepng($img);

※一番最初にコールしたimagecolorallocateが自動で背景色にセットされる

画像の回転

//ヘッダーでimg画像であることを宣言
header("Content-Type: image/png");
//外部から画像の読み込み
$img = imagecreatefrompng('sample.png');
//背景色を指定
$color = imagecolorallocate($img, 0, 0, 0);
//画像を回転(リソース、角度、背景色)
$newimg = imagerotate($img, 45, $color);
//書き出し
imagepng($newimg);

GDでサムネイルを作る(画像の拡大と縮小)

画像の拡大と縮小


//ヘッダーでimg画像であることを宣言
header("Content-Type: image/png");
//外部から画像の読み込み
$img = imagecreatefrompng('sample03.png');
//読み込んだ画像の幅と高さを取得する
$width = imagesx($img);
$height = imagesy($img);
//新規イメージオブジェクトの作成
$out = imagecreatetruecolor($width/2, $height/2);
//リサンプリング処理。コピー元、コピー先、座標、コピー先の幅、コピー先の高さ、コピー元の幅、コピー元の高さ
imagecopyresampled($out, $img,0,0,0,0, $width/2, $height/2, $width, $height);
//書き出し
imagepng($out);

※imagecreatetruecolorはimagecreate の強化版

参考にしたサイト
http://www.geekpage.jp/web/php-gd/resize1.php
http://phpspot.net/php/man/php/function.imagecopyresampled.html

GD グラフィック ライブラリ

画像の生成

//ヘッダーでimg画像であることを宣言
header("Content-Type: image/png");
//新規イメージオブジェクトの生成
$img = imagecreate(200, 200);
//カラー情報を付与(対象、R、G、B)
imagecolorallocate($img, 255, 0, 0);
//書き出し
imagepng($img);

※imagecreateで扱えるのは256色まで、TrueColorイメージを扱いたい場合はimagecreatetruecolorを使う。

外部から画像の読み込み

//ヘッダーでimg画像であることを宣言
header("Content-Type: image/png");
//外部から画像の読み込み
$img = imagecreatefrompng('sample02.png');
//書き出し
imagepng($img);
参考にしたサイト
http://www.geekpage.jp/web/php-gd/imagefilledrectangle.php
http://phpspot.net/php/man/php/function.imagecolorallocate.html
http://ponk.jp/php/gd/kihon
http://www43.atpages.jp/opicon69/libgd/

jQueryとは

基本の型

jQuery( function ($) {
// この 中 に 処理 を 書く
});

※これ以外にも書き方あるけどHTMLの読み込み順を気にしないといけないなど不便なので使わない。

$( function($){
//処理 を ここ に 書く
});

※これでも動くけど$が別のライブラリーで使われてた場合に不具合が生じる

jQueryでできること

  • CSSの操作
  • DOM要素(HTML)を付け加えたり
  • AJAXを使った非同期でのjSONの取得やDOM要素の書き換え

$(jQuery)の基本的な使い方

$はjQueryの別名(エイリアス)
$(…)はjQuery(…)と書くこともできる!?

セレクター

$(” セレクター文字列”)
$(“#name”)

DOMの生成

$(“HTML文字列”)
$(“< li > 三郎 ”). appendTo(“# family”);
第 2 引数 に オブジェクト を 指定 する と、 その オブジェクト の プロパティ は、 HTML の 属性 として 設定 さ れ る。

jQuery( function ($) {
$("< a >", {
href: "abc. html",
target: "_blank",
”class”: "myClass"
});
});

jQuery オブジェクト

$( セレクター) を 呼び出す と、 jQuery オブジェクト が 返さ れ る。
SMXLL

メソッドチェーン:「つなげて書けるよ」ってこと

$("#color_div").css("border","1 px solid red").css("color","red");

※ただしwidthとかの「値」取得した場合は jQuery オブジェクト は 返っ てこないのでつなげられない。

Hello world!

WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !