小记-用canvas完成图像液化（向前变形）过程

前几天由于团队需要，折腾了一下图像液化的处理过程。

现在来整理一下思路，做个记录。

用到公式如下，网上拿来的

话不多说，上代码

本来想尽量写出点逼格。。。后来发现怎么写也还是几个function搞定，就那样了。

(function(global) {

    // 计算两点距离平方
    function distanceSqr( x1, y1, x2, y2 ) { return sqr(x1-x2) + sqr(y1-y2); }
    // 计算平方
    function sqr(x) { return x*x; }

    // 遍历一个指定圆内的所有点
    // 通过callback传入回调方法，回调传出每一个点的相关信息
    function eachCircleDot( imageData, ox, oy, r, callback ) {

        var imgWidth    = imageData.width,
            imgHeight   = imageData.height,
            data        = imageData.data,
            left        = ox-r,
            right       = ox+r,
            top         = oy-r,
            bottom      = oy+r,
            dotRedOffset,dotGreenOffset,dotBlueOffset,alphaOffset;

        for( var x = left; x < right; x++ )
            for( var y = top; y < bottom; y++ )

                if( distanceSqr( x, y, ox, oy ) <= sqr(r) ) {

                    dotRedOffset      = y*imgWidth*4+x*4;
                    dotGreenOffset    = dotRedOffset    + 1;
                    dotBlueOffset     = dotGreenOffset  + 1;
                    alphaOffset       = dotBlueOffset   + 1;

                    callback(
                        // 当前点的坐标
                        { x:x, y:y },
                        // 点的RGBA四个分量对应字节的下标
                        {
                            r: dotRedOffset,
                            g: dotGreenOffset,
                            b: dotBlueOffset,
                            a: alphaOffset,
                        },
                        // 传进来的ImageData的data部分
                        data

                    );

                }

    }

    // 复制一个imageData的data到一个buff里
    function copyImageDataBuff( imgData ) {

        var data = imgData.data,
            imgDataBuff = [];

        for( var i in data )
            imgDataBuff[i] = data[i];

        return imgDataBuff;

    }

    // 从buff按照指定坐标复制像素点数据到目标imageData里
    function moveDot( imgData, dataBuff, x, y, srcX, srcY ) {

        var imgWidth    = imgData.width,
            imgHeight   = imgData.height,

            data = imgData.data;

        x = Math.floor(x);
        y = Math.floor(y);

        srcX = Math.floor(srcX);
        srcY = Math.floor(srcY);

        var targetStartOffset   = y*imgHeight*4 + x*4,
            srcStartOffset      = srcY*imgHeight*4 + srcX*4;

        for( var i = 0; i < 4; i++ )
            data[ targetStartOffset + i ] = dataBuff[ srcStartOffset + i ];

    }

    // 执行液化过程
    // imgData  通过canvas的getImageData方法得到的数据对象
    // cx,cy    圆心坐标
    // mx,my    移动目标坐标
    // r        作用半径
    // strength 力度百分比(1-100)
    function liquify( imgData, cx, cy, mx, my, r, strenth ) {

        var imgDataBuff = copyImageDataBuff(imgData);

        eachCircleDot( imgData, cx, cy, r, function( posi ) {

            var tx = posi.x,
                ty = posi.y;

            var u = transFormula( cx, cy, mx, my, tx, ty, r, strenth );

            moveDot( imgData, imgDataBuff, tx, ty, u.x, u.y );

            function transFormula( cx, cy, mx, my, tx, ty, r, strenth ) {

                strenth = strenth || 100;

                var relativity = sqr(r) - distanceSqr( tx, ty, cx, cy );

                var distanceMovedSqr    = distanceSqr( mx, my, cx, cy );

                var rate = sqr( relativity / ( relativity + distanceMovedSqr*(100/strenth) ) );

                var ux = tx - rate * (mx-cx),
                    uy = ty - rate * (my-cy);

                return { x:ux, y:uy };

            }

        });

    }

    // 挂到全局对象
    global.LiquifyFilter = {
        liquify: liquify
    };

})(window);

使用它

1. 先用canvas的

   getImageData();
   

   方法获取到要处理图片的imageData

2. 全局作用域下调用

   LiquifyFilter.liquify( imageData, 圆心X, 圆心Y, 目标点X, 目标点Y, 作用半径, [力度百分比] );
   

   完成转换。

3. 然后再用canvas的

   puImageData();
   

   把转换后的imageData输出到canvas中

效果图如下