トリアエズぶろぐ
フリーランスでやってる77世代のWEBプログラマが福岡からのんびりとお送りいたします。
スポンサーサイト


一定期間更新がないため広告を表示しています

サーバのアラートメールを大量に受信してたらIPごとGmailにブロックされた


様々なサーバのアラートメールを大量にGmailアカウントに受信してた。
適当な内容だったので、ほぼほぼ迷惑メールラベルが付けられてたけど無視して、読んでは捨て読んでは捨て、してたらある時期からアラートメールが届かなくなってた。
メールサーバのログを見ると以下のエラーが。
 

 Our system has detected that this message is 550-5.7.1 likely unsolicited mail. To reduce the amount of spam sent to Gmail, 550-5.7.1 this message has been blocked. Please visit 550 5.7.1  https://support.google.com/mail/answer/188131 for more information. er4si1003638pbc.3 - gsmtp (in reply to end of DATA command))


全く違う内容のメールを送っても同様のエラーでブロックされてるので、どうやらIPごとブロックされてるぽい。

ウェブサービスやってるサーバだから、(Gmail)ユーザへのメールが届かなくなって非常に辛い。
とりま別のメールサーバ経由するようにして回避してみるのと、Google先生にお伺いを立ててみる。

皆様ご注意を。
JS+CanvasでInstagram風エフェクト #Canvasの基本からコントラスト調整まで


普段JavaScriptやCanvasを扱っていると、

JavaScript+CanvasでInstagram風の写真エフェクトが作りたい!
ラーメン画像をもっと美味しく見えるように加工したい!

って誰もが3日に2度くらいは思いますよね。(?)


ということで、Canvasの画像加工についてつらつらと書いていきたいと思います。

最近ではCSS3でのフィルタ機能なども充実していますが、画像として書き出したり
スタンプを付けたり、スマートフォン上で動かしたりしたいときに役に立つかもしれません。

今回は基本的なCanvasに画像を読み込み、簡単な加工、コントラスト調整までやってみましょう。
#一部jQuery使ってます
 
それでは早速、Canvasにラーメン画像を読み込みましょう。

 
[HTML]
<canvas id="myCanvas"></canvas>
 
[JavaScript]
// canvasオブジェクトをゲットします
var canvas = $("canvas#myCanvas")[0];
// コンテキストをゲットします。
var ctx = canvas.getContext('2d');
// Imageオブジェクトを作ってラーメンを読み込みます
var img = new Image();
img.onload = function(){
// 読み込み後、キャンバスのサイズをラーメンに合わせます。これ重要。
    $("canvas#myCanvas")
        .attr({
            width: img.width,
            height: img.height
        });
    // ラーメンをキャンバスに描画します
    ctx.drawImage(img, 0, 0);
}
img.src = "ramen.jpg";

読み込みはこれだけ。簡単ですね!

結果はこちら




さて、ここからが写真エフェクトの第一歩です。
読み込んだ画像のピクセルにアクセスしてみましょう。

先程
ctx.drawImage(img, 0, 0);
でコンテキストにラーメンを描画しましたが、コンテキストからイメージの生データ(ImageDataオブジェクト)を取り出すことができます。

var imageData = ctx.getImageData(x, y, x2, y2);
x, y, x2, y2 の矩形の範囲で取得できます。通常は 0, 0, 画像の幅, 画像の高さ を使うことになるでしょう。

データへのアクセスは
imageData.data
です。
imageData.data の中身は、RGBAの順番で並んだ1次元配列です。

(1ピクセル目)RGBA(2ピクセル目)RGBA・・・

と言った感じです。

一番左上 (0, 0) のピクセルは

red = imageData.data[0];
green = imageData.data[1];
blue = imageData.data[2];


ということになります。
(100, 100)の場所にあるピクセルは
x = 99;
y = 99;

データのスタート位置が
pos = (y*画像の幅 + x) * 4;
となり、

red = imageData.data[ pos ];
green = imageData.data[ pos + 1];
blue = imageData.data[ pos + 2];


ということになりますね。
この red, green, blue の値を変更して写真エフェクトを作る流れとなります。

変更したデータをコンテキストに書き戻すには、
ctx.putImageData(imageData, 0, 0);
です。

ちょっとわかりにくいかもしれませんが、コードを見ると分かりやすいと思います。
ということで、早速ラーメンを加工してみましょう。
   
[JavaScript]
    // ImageDataオブジェクトをゲット
    var imageData = ctx.getImageData(0, 0, img.width, img.height);
    
    // ぐるぐる回します。
    for (var y=0; y<img.height; y++){
        for(var x=0; x<img.width; x++){
            // データの開始位置
            pos = (y*img.width + x) * 4;
            
            // 平均色を作る
            gray = ~~((imageData.data[pos] + imageData.data[pos+1] + imageData.data[pos+2])/3);
            
            // 平均色を配列に書き込み
            imageData.data[pos  ] = gray;
            imageData.data[pos+1] = gray;
            imageData.data[pos+2] = gray;
        }
    }
    // 書き戻す
    ctx.putImageData(imageData, 0, 0);

画像の幅と高さを使ってぐるぐる回すのがコツですね。

結果はこちら



いかがでしょうか。意外と単純な仕組みですよね。

でも…ラーメンをモノクロにしてもおいしそうに見えない…

ということで、今回は一歩踏み込んで写真のコントラストを上げてみましょう。

 
コントラストとは、画像の明るい部分と暗い部分の差を言います。

コントラストが強い ⇒ 明暗の差が強い
コントラストが弱い ⇒ 明暗の差が弱い

ということです。
視覚で分かりやすいように簡単なグラフを作ってみました。
スライダーを動かしてみてください。




コントラストを上げると明るいところはより明るく、暗いところはより暗くなります。
逆にコントラストを下げると、明るいところは暗く、暗いところは明るくなります。

このように、画像の中にある様々なピクセルの明るさ(0〜255)に対して明暗の調整をすることで
コントラストの高い画像、低い画像を作ることができます。

コントラストのアルゴリズムはズバリこれ。
#valueは画像の明るさ、contrastには -127〜127 の値を与えます。
[JavaScript]
function _contrast(value, contrast){
    
    value = ~~value;
    contrast = ~~contrast;
    
    var aa;
    if (contrast > 0) {
        aa=255/(255-(contrast*2));
    } else {
        aa=(255+(contrast*2))/255;
    }
    return ~~(aa*(value-127))+127;
    
}

これを使って、ラーメンをより美味しくしてみましょう。

コントラストを32、ご飯系なのでより美味しくするよう REDを+8 してみます。
#ImageDataは0〜255の整数でなくてはならないため、modifyColorという関数で値を丸めてます。
[JavaScript]
        var imageData = ctx.getImageData(0, 0, img.width, img.height);
        for (var y=0; y<img.height; y++){
            for(var x=0; x<img.width; x++){
                
                pos = (y*img.width + x) * 4;
                
                r = imageData.data[pos];
                g = imageData.data[pos+1];
                b = imageData.data[pos+2];
                
                r = _contrast(r, 32) + 8;
                g = _contrast(g, 32);
                b = _contrast(b, 32);
                
                r = modifyColor(r);
                g = modifyColor(g);
                b = modifyColor(b);
                
                imageData.data[pos  ] = r;
                imageData.data[pos+1] = g;
                imageData.data[pos+2] = b;
            }
        }
        
        ctx.putImageData(imageData, 0, 0);
// rgb値を0から255に収める
function modifyColor(color){
    color = ~~color;
    return color>255 ? 255 : (color<0 ? 0 : color);
};
 

結果はこちら




元画像

と比べたらずいぶんメリハリが付いて美味しく見えるようになりましたね!


いかがでしょうか。
これができればあとはこっちのもの。
RGBの値を変更していくことで写真に様々なエフェクトを適用することができます。

 
JS+Canvasで様々な写真エフェクトや、SVGでスタンプを合成できるサイトを公開しています。
PC/スマートフォン対応、画像の保存までできます。ぜひお試し下さい。
#JavaScriptなので、僕のきちゃないソースコードも丸見えです。
 

Photo Effects Online powered by tuna.be


今後、このサイトで実装している

・もっとInstagram風なフィルタの作成、スクリーンやオーバーレイ合成のアルゴリズム
・画像の回転
・レンズケラレのシミュレーション
・レンズ端の画像の流れのシミュレーション
・JSで時間のかかる処理を行うときにスクリプトが止まらないようにする
・SVG画像の描画、色やサイズの変更

あたりをブログにできればと思ってます。

それでは、よいCanvasライフを!Enjoy!
 
GoogleAdsenseでBanされて復帰するまでのツイートまとめ


Check