h5 canvas透明度图像边缘提取算法

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });

function preload() {
	// atlas是地图集的意思，这里是一种资源，由png和json组成
    game.load.atlas('atlas', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');

     game.load.image('hotdog', 'assets/sprites/hotdog.png');
}

var sprite;

function create() {
	// 选择其中一张图片，greenJellyfish0000在assets/sprites/seacreatures_json.json中定义了
    sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'atlas', 'greenJellyfish0000');
    sprite.anchor.set(0.0);
      // tint是色彩的意思
    // sprite.tint = Math.random() * 0xffffff;
    // game.input.onDown.add(changeTint, this);
    //  var canvas = sprite.tintedTexture|| PIXI.CanvasPool.create(this);
    colortexture('phaserDude',sprite.texture,'#FFF');
    // game.add.sprite(0,0,'phaserDude');
    sprite.addChild(game.make.sprite(0, 0, 'phaserDude'));
}


function colortexture(key,texture, color)
{
    var data = [];
    var pixelWidth = 1;
    var pixelHeight = 1;
    var bmd = game.make.bitmapData();
    var ctx = bmd.context;
    var canvas = PIXI.CanvasPool.create(this);
    var context = canvas.getContext("2d");
    var crop = texture.crop;

    canvas.width = crop.width;
    canvas.height = crop.height;
  
    context.globalCompositeOperation = "copy";

    context.drawImage(texture.baseTexture.source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
   
    var rgbValues = PIXI.hex2rgb(color);
    var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];

    var pixelData = context.getImageData(0, 0, crop.width, crop.height);

    var pixels = pixelData.data;
   
    //寻找边界；如果上下左右 都不是全是透明度 也不是都不是全透明 并且当前像素也不是透明
    for (var i = 0,x = 0, y = 0; i < pixels.length; i += 4,x += 1)
    {
        var alpha = pixels[i + 3];
        var bottomIndex = canvas.width * 4 * (y + 1) +i%(canvas.width*4)+3;
        var topIndex = canvas.width * 4 * (y - 1) +i%(canvas.width*4)+3;
        var leftIndex = canvas.width * 4 * y +(i-1)%(canvas.width*4)+3;
        var rightIndex = canvas.width * 4 * y +(i+1)%(canvas.width*4)+3;
          
        var inner = true;
        var outer = true;
        //这个点不在边缘内部，他的四周透明度都不是0
        if(pixels[bottomIndex] !== 0 || pixels[topIndex]  !== 0 || pixels[leftIndex] == 0 || pixels[rightIndex] !== 0){
            inner = false;
        }
        
        //当前点不在边缘外部，他周围的点如果有一个是透明的说明他不是
        if(pixels[bottomIndex] === 0 || pixels[topIndex]  === 0 || pixels[leftIndex] === 0 || pixels[rightIndex] === 0){
            outer = false;
        }
        
        //当前的点既不在边缘外也不是边缘内，且不是透明的 说明是边
        if(!inner && !outer && alpha !== 0){
            ctx.fillStyle = color;
            ctx.fillRect(x * pixelWidth, y * pixelHeight, pixelWidth, pixelHeight);
            ctx.fillRect((x + 1) * pixelWidth, y * pixelHeight, pixelWidth, pixelHeight);
            ctx.fillRect(x * pixelWidth, (y + 1) * pixelHeight, pixelWidth, pixelHeight);
            ctx.fillRect((x - 1) * pixelWidth, y * pixelHeight, pixelWidth, pixelHeight);  
            ctx.fillRect(x * pixelWidth,( y - 1 )* pixelHeight, pixelWidth, pixelHeight);
        }
        
        if(x == canvas.width) {
            y++;
            x = 0;
        }
       
    }
    return bmd.generateTexture(key);
}

function changeTint() {
    sprite.tint = Math.random() * 0xffffff;
}

function update() {
	// 旋转
    // sprite.rotation += 0.02;
}