Movable TypeのCAPTCHA認証画像を見やすくする

Movable TypeのCAPTCHA認証画像を見やすくする

キャプチャ画像の見づらさにびっくりしたので、見やすいように加工しました。

気付けばキャプチャ画像がやたら見づらくなっていました。

読めない…

以前はここまでではなかったと思うので、先日のサーバーお引っ越しのときにMovable Typeを5.2.7にバージョンアップしたのが原因かもしれません…。
多少見づらくないと意味がありませんが、さすがにこれはちょっと…と思ったので加工することにしました。

背景画像を直接加工する

mtインストールディレクトリ内のmt-static/images/captcha-sourceの中の「background○.png」というファイルが背景画像です。5つあるファイルがランダムに選ばれるようです。
明るく加工してみました。

加工前

問題ない気もしたのですが

加工後

少し明るくしてみました

キャプチャ画像を確認してみました。最初に比べるとかなり見やすくなっています。

pmファイルを編集して明るさを調節

mtインストールディレクトリ内のlib/MT/Utilの「Captcha.pm」を編集します。
242行目の「brightness => 105」の部分、この数字を大きくするとキャプチャ画像の背景を明るくすることができます。

修正前

    # Read in the background file
    my $a          = int rand(5) + 1;
    my $background = Image::Magick->new();
    $background->Read(
        File::Spec->catfile( $base, 'background' . $a . '.png' ) );
    $background->Resize( width => ( $len * WIDTH() ), height => HEIGHT() );
    $im->Composite(
        compose => "Bumpmap",
        tile    => 'False',
        image   => $background
    );
    $im->Modulate( brightness => 105 );
    $im->Border(
        fill     => 'black',
        width    => 1,
        height   => 1,
        geometry => join( 'x', WIDTH() * $len, HEIGHT() )
    );

修正後

    $im->Modulate( brightness => 150 );

キャプチャ画像を確認してみました。…が、ノイズをどうにかしないとダメですね。他の方法と併用するといいかもしれません。

ノイズを全て除去

再び、mtインストールディレクトリ内のlib/MT/Utilの「Captcha.pm」を編集します。
208行目からノイズに関する記述があります。

修正前

    # Add some lines and dots to the image
    for my $i ( 0 .. ( $len * WIDTH() * HEIGHT() / 14 + 200 - 1 ) ) {
        my $a     = int rand( $len * WIDTH() );
        my $b     = int rand HEIGHT();
        my $c     = int rand( $len * WIDTH() );
        my $d     = int rand HEIGHT();
        my $index = $im->Get("pixel[$a, $b]");

        if ( $i < ( $len * WIDTH() * HEIGHT() / 14 + 200 ) / 100 ) {
            $im->Draw(
                primitive => 'line',
                stroke    => $index,
                points    => "$a, $b, $c, $d"
            );
        }
        elsif ( $i < ( $len * WIDTH() * HEIGHT() / 14 + 200 ) / 2 ) {
            $im->Set( "pixel[$c, $d]" => $index );
        }
        else {
            $im->Set( "pixel[$c, $d]" => "black" );
        }
    }

修正後

ノイズに関する部分を全てコメントにしてみました。

    # Add some lines and dots to the image
#    for my $i ( 0 .. ( $len * WIDTH() * HEIGHT() / 14 + 200 - 1 ) ) {
#        my $a     = int rand( $len * WIDTH() );
#        my $b     = int rand HEIGHT();
#        my $c     = int rand( $len * WIDTH() );
#        my $d     = int rand HEIGHT();
#        my $index = $im->Get("pixel[$a, $b]");

#        if ( $i < ( $len * WIDTH() * HEIGHT() / 14 + 200 ) / 100 ) {
#            $im->Draw(
#                primitive => 'line',
#                stroke    => $index,
#                points    => "$a, $b, $c, $d"
#            );
#        }
#        elsif ( $i < ( $len * WIDTH() * HEIGHT() / 14 + 200 ) / 2 ) {
#            $im->Set( "pixel[$c, $d]" => $index );
#        }
#        else {
#            $im->Set( "pixel[$c, $d]" => "black" );
#        }
#    }

キャプチャ画像を確認。たまにちょっと見づらいかなーという画像が生成されますが、基本的にはすごく見やすいです。

ノイズの一部を除去

ノイズの一部を除去することもできます。
mtインストールディレクトリ内のlib/MT/Utilの「Captcha.pm」の218行目の「primitive => 'line',」をコメントにします。

修正前

    # Add some lines and dots to the image
    for my $i ( 0 .. ( $len * WIDTH() * HEIGHT() / 14 + 200 - 1 ) ) {
        my $a     = int rand( $len * WIDTH() );
        my $b     = int rand HEIGHT();
        my $c     = int rand( $len * WIDTH() );
        my $d     = int rand HEIGHT();
        my $index = $im->Get("pixel[$a, $b]");

        if ( $i < ( $len * WIDTH() * HEIGHT() / 14 + 200 ) / 100 ) {
            $im->Draw(
                primitive => 'line',
                stroke    => $index,
                points    => "$a, $b, $c, $d"
            );
        }
        elsif ( $i < ( $len * WIDTH() * HEIGHT() / 14 + 200 ) / 2 ) {
            $im->Set( "pixel[$c, $d]" => $index );
        }
        else {
            $im->Set( "pixel[$c, $d]" => "black" );
        }
    }

修正後

    # Add some lines and dots to the image
    for my $i ( 0 .. ( $len * WIDTH() * HEIGHT() / 14 + 200 - 1 ) ) {
        my $a     = int rand( $len * WIDTH() );
        my $b     = int rand HEIGHT();
        my $c     = int rand( $len * WIDTH() );
        my $d     = int rand HEIGHT();
        my $index = $im->Get("pixel[$a, $b]");

        if ( $i < ( $len * WIDTH() * HEIGHT() / 14 + 200 ) / 100 ) {
            $im->Draw(
#                primitive => 'line'
                stroke    => $index,
                points    => "$a, $b, $c, $d"
            );
        }
        elsif ( $i < ( $len * WIDTH() * HEIGHT() / 14 + 200 ) / 2 ) {
            $im->Set( "pixel[$c, $d]" => $index );
        }
        else {
            $im->Set( "pixel[$c, $d]" => "black" );
        }
    }

キャプチャ画像を確認。ちょっと見づらいかなと思うものを選びました。
このサイトはこの状態で表示しています。

おまけ:説明文を変更

mtインストールディレクトリ内のlib/MT/L10Nの「ja.pm」でキャプチャ画像とともに表示される説明文を変更することもできます。

## php/lib/captcha_lib.php
	'Captcha' => 'Captcha',
	'Type the characters shown in the picture above.' => '画像の中に見える文字を入力してください。',

参考サイト

Captcha認証の画像を見やすくする - RST*Blog

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事