「画像」タグアーカイブ

securimageの設定の変更方法


今回は、画像認証機能を簡単に実装できる、securimageを使用する場合の設定の変更方法を書いていきます。

まず、securimageをダウンロードすると、「securimage」というフォルダが圧縮された状態でダウンロードフォルダに入りますので、解凍し、「securimage」フォルダまるごとEcliipse内に貼りつけます。

securimageのフォルダを開くと、「securimage_show.php」というphpファイルがありますので、それを開きます。

デフォルトの状態ですと、中身はほとんどコメントアウトされているかと思います。
今回注目するのは「$img = new Securimage();」というコードと「$img->show();」の間にあるコメントアウトされている部分です。

その部分よく見ると、「$img->…」がたくさんあると思います。
この中で最も変更したいと思う方が多い部分の解説をしていきたいと思います。

$img->image_height    = **;
→画像認証の画像の高さを変更

$img->image_width    = **;
→画像認証の画像の幅を変更

$img->perturbation   = .**;
→画像の文字の読みにくさを変更
これは小数点以下から指定できる?ようです。(0.1、0.5など)
ちなみに0.9だと読みにくく、0.1だととても読みやすい画像になりました。

$img->code_length = **;
→画像認証の文字数です。
**の部分に入力した数字分、文字が表示されます。
(** = 8 にすると8文字表示されます。)

変更したい部分のコメントアウトを解除して数値を変更してください。

他の部分も見ればどの部分を変更できるかだいたいわかるかと思いますが、私は触ることはありませんでした!
画像認証の画像にこだわりたい方はぜひいろいろいじってみてください!

今回は以上です。

——▼ 追記 ————————————————

【 CakePHP を使用している場合 】

apps ではなく www  直下に securimage のファイルをセット
認証画面を表示したい View 部分に下記コードを記入すれば画像が表示されます。

<img src=”<?php echo $this->webroot; ?>securimage/securimage_show.php”>

画像の詳細設定は上記と同じく securimage_show.php に記述してください。

Securimageのカスタマイズ(上記の続きになります↓)

▼文字数をランダム
$img->code_length = rand(3,5);

▼文字のフォント
$img->ttf_file = ‘./Quiff.ttf’;

▼表示する文字列
$securimage->charset =’ABCDEFGHKLMNPRSTUVWYZabcdefghklmnprstuvwyz23456789′

▼文字色の変更
$img->text_color = new Securimage_Color(“#000000”);

▼背景色の変更
$img->image_bg_color = new Securimage_Color(“#FFFFFF”);

▼背景画像の変更
$img->show(‘backgrounds/bg1.jpg’);

▼線の本数
$img->num_lines = 8;

▼線の色
$img->line_color = new Securimage_Color(“#000000”);


画像を表示させる方法


PHP内での画像を表示させる方法を紹介します。

まずはじめに、eclipseに画像を入れます。
わかりやすいように、デスクトップ上にウェブに反映したい画像を貼りつけておきます。
この画像の上で右クリックし「コピー」を選択します。

次にeclipseを開き、画像を移します。
まずは開発環境のwwwの「img」を選択します。
汎用性の高い、よく使う画像であればimgの中に「common」という名前のフォルダを作ると、画像の整理もでき、良いかと思います。
フォルダを選択した状態で右クリックし「貼り付け」をクリックします。
そうすると、フォルダの中に画像が貼りつけられるので、eclipseへの画像の反映は完了です。

次はこの画像をウェブに反映させるための作業です。
表示させたいページに下記のようにPHP内に書き出します。

print(“<img src=¥”/フォルダ名/画像名¥”>”);

※¥は半角の円マークにしてください。
※フォルダ名は一つ中に入るごとに半角スラッシュで区切ります。

このような式を書き保存したあとにウェブを見ると、画像が反映されていることがわかると思います。

また、altを使うと画像がなんらかの形で潰れて見れなくなってしまった際に、画像の説明文を表示させることができます。

print(“<img src=¥”/フォルダ名/画像名¥” alt=¥”サイトのロゴ¥”>”);

※¥は半角の円マークにしてください。
※フォルダ名は一つ中に入るごとに半角スラッシュで区切ります。

こうすることで「サイトのロゴ」という説明文付きの画像をアップすることができます。