opera:hige このページをアンテナに追加

 | 

2008-06-04

Canvas で色情報取得 のブックマークレット 00:07 Canvas で色情報取得 のブックマークレット - opera:hige を含むブックマーク はてなブックマーク - Canvas で色情報取得 のブックマークレット - opera:hige

Canvas で色情報取得 - opera:hige - チーム俺等 のブックマークレット版


画像を開いて以下のブックマークレットを適用すると画像上のクリックした位置の色情報が取得できます.

javascript:(function(){if(window.location.href.match(/^.*\.(jpe?g|bmp|gif|png)$/i)){var ie=document.getElementsByTagName('img')[0];var io=new Image();io.src=ie.src;var canvas=document.createElement('canvas');canvas.width=io.width;canvas.height=io.height;var ctx=canvas.getContext('2d');ctx.drawImage(io,0,0,io.width,io.height);ie.parentNode.replaceChild(canvas, ie);var gctx=canvas.getContext('opera-2dgame');canvas.addEventListener('click',function(e){alert(gctx.getPixel(e.offsetX,e.offsetY));},false);}})();

見やすく.

javascript:(function(){
    if(window.location.href.match(/^.*\.(jpe?g|bmp|gif|png)$/i)) {
        var ie = document.getElementsByTagName('img')[0];
        var io = new Image();
        io.src = ie.src;

        var canvas = document.createElement('canvas');
        canvas.width = io.width;
        canvas.height = io.height;

        var ctx = canvas.getContext('2d');
        ctx.drawImage(io, 0, 0, io.width, io.height);
        ie.parentNode.replaceChild(canvas, ie);
        var gctx = canvas.getContext('opera-2dgame');

        canvas.addEventListener('click',function(e){
            var x = e.offsetX;
            var y = e.offsetY;
            alert(gctx.getPixel(x, y));
        },false);
    }
})();
トラックバック - http://orera.g.hatena.ne.jp/higeorange/20080604
 |