摘要：前幾天由于團隊需要，折騰了一下圖像液化的處理過程。現在來整理一下思路，做個記錄。用到公式如下，網上拿來的話不多說，上代碼本來想盡量寫出點逼格。。。后來發現怎么寫也還是幾個搞定，就那樣了。然后再用的把轉換后的輸出到中效果圖如下

前幾天由于團隊需要，折騰了一下圖像液化的處理過程。
現在來整理一下思路，做個記錄。

  
用到公式如下，網上拿來的

  
話不多說，上代碼

  本來想盡量寫出點逼格。。。后來發現怎么寫也還是幾個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);

  
使用它

先用canvas的

getImageData();

方法獲取到要處理圖片的imageData

全局作用域下調用

LiquifyFilter.liquify( imageData, 圓心X, 圓心Y, 目標點X, 目標點Y, 作用半徑, [力度百分比] );

完成轉換。

然后再用canvas的

puImageData();

把轉換后的imageData輸出到canvas中

  
效果圖如下