globalCompositeOperation=”darker”が使えないブラウザ用の自前JS実装

2012年11月17日 by admin

function darker(src, dst)
{  
    var w,h;
   
    if(src.width > dst.width)
    {
        w = src.width;
    }
    else
    {
        w = dst.width;
    }
   
    if(src.height > dst.height)
    {
        h = src.height;
    }
    else
    {
        h = dst.height;
    }

    var ctx1 = src.getContext("2d");
    var canvas = document.createElement("canvas");
    canvas.setAttribute("width", w);
    canvas.setAttribute("height", h);
    ctx2 = canvas.getContext("2d");
    ctx2.fillStyle = "rgba(255,255,255,1)";
    ctx2.fillRect(0, 0, w, h);
    ctx2.drawImage(src, 0, 0);

    var canvas2 = document.createElement("canvas");
    canvas2.setAttribute("width", w);
    canvas2.setAttribute("height", h);
    ctx3 = canvas2.getContext("2d");
    ctx3.fillStyle = "rgba(255,255,255,1)";
    ctx3.fillRect(0, 0, w, h);
    ctx3.drawImage(dst, 0, 0);

    var result = ctx2.getImageData(0, 0, w, h);
    var blend = ctx3.getImageData(0, 0, w, h);
   
    var aO;
   
    for(var data = result.data, blend = blend.data, i = 0 ; i < data.length ; i+=4)
    {
        aO = (data[i+3]) + (blend[i+3]);
        data[i] = 255 - ((255 - data[i]) * (data[i+3]) + (255 - blend[i]) * (blend[i+3]));
        data[i+1] = 255 - ((255 - data[i+1]) * (data[i+3]) + (255 - blend[i+1]) * (blend[i+3]));
        data[i+2] = 255 - ((255 - data[i+2]) * (data[i+3]) + (255 - blend[i+2]) * (blend[i+3]));
    }
   
    ctx1.putImageData(result, 0, 0);
   
    return src;
}

globalAlphaを使ったときと同じ動作にするためには、
dst側のalphaの値をglobalAlphaの値で置き換えればいけるんじゃないかと思うけどまだ未確認。

[JavaScript]ユニークIDを発行する関数を生成する

2012年11月10日 by admin

var Uuid = (function () { var i=0; return function () { return ++i; }; })();

さらにeval,String.replaceと組み合わせて

var params = ["hoge", "fuga", "aaa"];
Class = function () {};
Class.reflection = function (classname, params) {
    var args = [];
    for(var i=0; i < params.length; i++) args.push("params[%d]");
    return eval("new " + classname + "(" + args.join(",").replace(/%d/g, (function () {
        var i=0; return function () { return i++; };
    })()) + ")");
}
var a = Class.reflection("Array", params);

クラス名文字列とパラメータの配列からクラスを生成するリフレクション
Function.bindを利用しても同じことはできるけど、IEなどで使えない場合にはこれが使える。

ブログ再スタート

2012年11月10日 by hinata

技術ブログとして再スタートすることにした。

初投稿ではとりあえず便利な自作ライブラリの紹介でも。

mimechecker

mimechecker。apacheのmagicファイルの定義を利用して、

対象ファイルの中身を解析してmime-typeの判定をしてくれるライブラリです。

ファイルアップロード処理を作る際のセキュリティ確保なんかにどうぞ。

<?php

$checker = new MimeChecker();

$checker->parse("magic");

$mimetype = $checker->getMime($path);

?>

みたいに使います。