Javascript图像处理——平滑处理

基本原理

这里直接引用OpenCV 2.4+ C++ 平滑处理和OpenCV 2.4+ C++ 边缘梯度计算的相关内容：

平滑也称模糊, 是一项简单且使用频率很高的图像处理方法。

平滑处理时需要用到一个滤波器。 最常用的滤波器是线性滤波器，线性滤波处理的输出像素值（例如：g(i,j)）是输入像素值（例如：f(i+k,j+l)）的加权平均：

　　　　g(i,j) = \sum_{k,l} f(i+k, j+l) h(k,l)

h(k,l)称为核, 它仅仅是一个加权系数。

这里涉及一种叫做“卷积”的运算，那么卷积是什么呢？

卷积是在每一个图像块与某个算子（核）之间进行的运算。

核？！

核就是一个固定大小的数值数组。该数组带有一个锚点 ，一般位于数组中央。

kernel example

 可是这怎么运算啊？

假如你想得到图像的某个特定位置的卷积值，可用下列方法计算：

将核的锚点放在该特定位置的像素上，同时，核内的其他值与该像素邻域的各像素重合；
将核内各值与相应像素值相乘，并将乘积相加；
将所得结果放到与锚点对应的像素上；
对图像所有像素重复上述过程。
用公式表示上述过程如下：

　　　　H(x,y) = \sum_{i=0}^{M_{i} - 1} \sum_{j=0}^{M_{j}-1} I(x+i - a_{i}, y + j - a_{j})K(i,j)

在图像边缘的卷积怎么办呢？

计算卷积前，需要通过复制源图像的边界创建虚拟像素，这样边缘的地方也有足够像素计算卷积了。这就是为什么上一篇文章需要做虚拟边缘函数。


均值平滑

均值平滑实际上就是内核元素全是1的卷积运算，然后再除以内核的大小，用数学表达式来表示就是：

　　\texttt{K} =  \frac{1}{\texttt{ksize.width*ksize.height}} \begin{bmatrix} 1 & 1 & 1 &  \cdots & 1 & 1  \\ 1 & 1 & 1 &  \cdots & 1 & 1  \\ \hdotsfor{6} \\ 1 & 1 & 1 &  \cdots & 1 & 1  \\ \end{bmatrix}

下面我们来实现均值平滑函数blur：

function blur(__src, __size1, __size2, __borderType, __dst){
    if(__src.type && __src.type == "CV_RGBA"){
        var height = __src.row,
            width = __src.col,
            dst = __dst || new Mat(height, width, CV_RGBA),
            dstData = dst.data;
        var size1 = __size1 || 3,
            size2 = __size2 || size1,
            size = size1 * size2;
        if(size1 % 2 !== 1 || size2 % 2 !== 1){
            console.error("size大小必须是奇数");
            return __src;
        }
        var startX = Math.floor(size1 / 2),
            startY = Math.floor(size2 / 2);
        var withBorderMat = copyMakeBorder(__src, startY, startX, 0, 0, __borderType),
            mData = withBorderMat.data,
            mWidth = withBorderMat.col;
        
        var newValue, nowX, offsetY, offsetI;
        var i, j, c, y, x;
        
        for(i = height; i--;){
            offsetI = i * width;
            for(j = width; j--;){
                for(c = 3; c--;){
                    newValue = 0;
                    for(y = size2; y--;){
                        offsetY = (y + i) * mWidth * 4;
                        for(x = size1; x--;){
                            nowX = (x + j) * 4 + c;
                            newValue += mData[offsetY + nowX];
                        }
                    }
                    dstData[(j + offsetI) * 4 + c] = newValue / size;
                }
                dstData[(j + offsetI) * 4 + 3] = mData[offsetY + startY * mWidth * 4 + (j + startX) * 4 + 3];
            }
        }
        
    }else{
        console.error("不支持类型。");
    }
    return dst;
}

其中size1和size2分别是核的横向和纵向大小，并且必须是正奇数。

高斯平滑

最有用的滤波器 (尽管不是最快的)。 高斯滤波是将输入数组的每一个像素点与高斯内核卷积将卷积和当作输出像素值。

http://www.cnblogs.com/http://www.cnblogs.com/_images/Smoothing_Tutorial_theory_gaussian_0.jpg

参考一维高斯函数，我们可以看见，他是个中间大两边小的函数。

所以高斯滤波器其加权数是中间大，四周小的。

其二维高斯函数为：

　　　　G_{0}(x, y) = A  e^{ \dfrac{ -(x - \mu_{x})^{2} }{ 2\sigma^{2}_{x} } +  \dfrac{ -(y - \mu_{y})^{2} }{ 2\sigma^{2}_{y} } } 

其中 \mu 为均值 (峰值对应位置)，\sigma 代表标准差 (变量x 和 变量y 各有一个均值，也各有一个标准差)。

这里参考OpenCV的实现，不过应该还有优化空间，因为还没用到分离滤波器。

首先我们做一个getGaussianKernel来返回高斯滤波器的一维数组。

function getGaussianKernel(__n, __sigma){
    var SMALL_GAUSSIAN_SIZE = 7,
        smallGaussianTab = [[1],
                            [0.25, 0.5, 0.25],
                            [0.0625, 0.25, 0.375, 0.25, 0.0625],
                            [0.03125, 0.109375, 0.21875, 0.28125, 0.21875, 0.109375, 0.03125]
        ];
        
    var fixedKernel = __n & 2 == 1 && __n <= SMALL_GAUSSIAN_SIZE && __sigma <= 0 ? smallGaussianTab[__n >> 1] : 0;
    
    var sigmaX = __sigma > 0 ? __sigma : ((__n - 1) * 0.5 - 1) * 0.3 + 0.8,
        scale2X = -0.5 / (sigmaX * sigmaX),
        sum = 0;
    
    var i, x, t, kernel = [];
    
    for(i = 0; i < __n; i++){
        x = i - (__n - 1) * 0.5;
        t = fixedKernel ? fixedKernel[i] : Math.exp(scale2X * x * x);
        kernel[i] = t;
        sum += t;
    }
    
    sum = 1 / sum;
    
    for(i = __n; i--;){
        kernel[i] *= sum;
    }
    
    return kernel;
};

然后通过两个这个一维数组，便可以计算出一个完整的高斯内核，再利用blur里面用到的循环方法，就可以算出高斯平滑后的矩阵了。

function GaussianBlur(__src, __size1, __size2, __sigma1, __sigma2, __borderType, __dst){
    if(__src.type && __src.type == "CV_RGBA"){
        var height = __src.row,
            width = __src.col,
            dst = __dst || new Mat(height, width, CV_RGBA),
            dstData = dst.data;
        var sigma1 = __sigma1 || 0,
            sigma2 = __sigma2 || __sigma1;
        var size1 = __size1 || Math.round(sigma1 * 6 + 1) | 1,
            size2 = __size2 || Math.round(sigma2 * 6 + 1) | 1,
            size = size1 * size2;
        if(size1 % 2 !== 1 || size2 % 2 !== 1){
            console.error("size必须是奇数。");
            return __src;
        }
        var startX = Math.floor(size1 / 2),
            startY = Math.floor(size2 / 2);
        var withBorderMat = copyMakeBorder(__src, startY, startX, 0, 0, __borderType),
            mData = withBorderMat.data,
            mWidth = withBorderMat.col;
            
        var kernel1 = getGaussianKernel(size1, sigma1),
            kernel2, 
            kernel = new Array(size1 * size2);
        
        if(size1 === size2 && sigma1 === sigma2)
            kernel2 = kernel1;
        else
            kernel2 = getGaussianKernel(size2, sigma2);
        
        var i, j, c, y, x;
        
        for(i = kernel2.length; i--;){
            for(j = kernel1.length; j--;){
                kernel[i * size1 + j] = kernel2[i] * kernel1[j];
            }
        }
        
        var newValue, nowX, offsetY, offsetI;
        
        for(i = height; i--;){
            offsetI = i * width;
            for(j = width; j--;){
                for(c = 3; c--;){
                    newValue = 0;
                    for(y = size2; y--;){
                        offsetY = (y + i) * mWidth * 4;
                        for(x = size1; x--;){
                            nowX = (x + j) * 4 + c;
                            newValue += (mData[offsetY + nowX] * kernel[y * size1 + x]);
                        }
                    }
                    dstData[(j + offsetI) * 4 + c] = newValue;
                }
                dstData[(j + offsetI) * 4 + 3] = mData[offsetY + startY * mWidth * 4 + (j + startX) * 4 + 3];
            }
        }
        
    }else{
        console.error("不支持的类型");
    }
    return dst;
}

中值平滑

中值滤波将图像的每个像素用邻域 (以当前像素为中心的正方形区域)像素的中值代替 。

依然使用blur里面用到的循环，只要得到核中的所有值，再通过sort排序便可以得到中值，然后锚点由该值替代。

function medianBlur(__src, __size1, __size2, __borderType, __dst){
    if(__src.type && __src.type == "CV_RGBA"){
        var height = __src.row,
            width = __src.col,
            dst = __dst || new Mat(height, width, CV_RGBA),
            dstData = dst.data;
        var size1 = __size1 || 3,
            size2 = __size2 || size1,
            size = size1 * size2;
        if(size1 % 2 !== 1 || size2 % 2 !== 1){
            console.error("size必须是奇数");
            return __src;
        }
        var startX = Math.floor(size1 / 2),
            startY = Math.floor(size2 / 2);
        var withBorderMat = copyMakeBorder(__src, startY, startX, 0, 0, __borderType),
            mData = withBorderMat.data,
            mWidth = withBorderMat.col;
        
        var newValue = [], nowX, offsetY, offsetI;
        var i, j, c, y, x;
        
        for(i = height; i--;){
            offsetI = i * width;
            for(j = width; j--;){
                for(c = 3; c--;){
                    for(y = size2; y--;){
                        offsetY = (y + i) * mWidth * 4;
                        for(x = size1; x--;){
                            nowX = (x + j) * 4 + c;
                            newValue[y * size1 + x] = mData[offsetY + nowX];
                        }
                    }
                    newValue.sort(function(a, b){return a - b;});
                    dstData[(j + offsetI) * 4 + c] = newValue[Math.round(size / 2)];
                }
                dstData[(j + offsetI) * 4 + 3] = mData[offsetY + startY * mWidth * 4 + (j + startX) * 4 + 3];
            }
        }
        
    }else{
        console.error("类型不支持");
    }
    return dst;
}; 

本文摘自：https://www.cnblogs.com/justany/archive/2012/12/28/2836614.html
 
/////////////////
更多例子

Javascript图像处理之平滑处理
　　原理来自Justany_WhiteSnow的Javascript图像处理——平滑处理一文。

/*
 * BORDER_REPLICATE:     aaaaaaaa|abcdefgh|hhhhhhhh
 * BORDER_REFLECT:       hgfedcba|abcdefgh|hgfedcba
 * BORDER_REFLECT_101:   hgfedcb|abcdefgh|gfedcba
 * BORDER_WRAP:          efgh|abcdefgh|abcd
 * BORDER_CONSTANT:      iiiiiiii|abcdefgh|iiiiiiii  with some specified 'i'(default value [0, 0, 0, 255])
*/

(function () {
    function imageBlur(iCanvas, url, borderType, orientation, blurType, value) {
        this.canvas = iCanvas;
        this.iCtx = this.canvas.getContext("2d");
        this.url = url;
        this.borderType = borderType;
        this.orientation = orientation || "bottom";
        this.value = value || [0, 0, 0, 255];
        this.blurType = blurType || "blur";
    }

    imageBlur.prototype = {
        imread: function (_image) {
            var width = _image.width,
                height = _image.height;
            this.iResize(width, height);
            this.iCtx.drawImage(_image, 0, 0);
            var imageData = this.iCtx.getImageData(0, 0, width, height),
                tempMat = new Mat(height, width, imageData.data);
            imageData = null;
            this.iCtx.clearRect(0, 0, width, height);
            return tempMat;
        },
        iResize: function (_width, _height) {
            this.canvas.width = _width;
            this.canvas.height = _height;
        },
        RGBA2ImageData: function (_imgMat) {
            var width = _imgMat.col,
                height = _imgMat.row;
            var imageData = this.iCtx.createImageData(width, height);
            imageData.data.set(_imgMat.data);
            return imageData;
        },
        render: function () {
            var img = new Image();
            var _this = this;
            img.onload = function () {
                var myMat = _this.imread(img);
                var newImage = null;
                if (_this.blurType == "blur") {
                    newImage = blur(myMat, 11, 11, _this.borderType);
                } else if (_this.blurType == "median") {
                    newImage = medianBlur(myMat, 11, 11, _this.borderType);
                } else {
                    newImage = GaussianBlur(myMat, 11, 11, 0, 0, _this.borderType);
                }
                var newIamgeData = _this.RGBA2ImageData(newImage);
                _this.iCtx.putImageData(newIamgeData, 0, 0);
            };
            img.src = this.url;
        }
    };

    function Mat(_row, _col, _data, _buffer) {
        this.row = _row || 0;
        this.col = _col || 0;
        this.channel = 4;
        this.buffer = _buffer || new ArrayBuffer(_row * _col * 4);
        this.data = new Uint8ClampedArray(this.buffer);
        _data && this.data.set(_data);
        this.bytes = 1;
        this.type = "CV_RGBA";
    }

    function blur(__src, __size1, __size2, __borderType, __dst) {
        if (__src.type && __src.type == "CV_RGBA") {
            var height = __src.row,
                width = __src.col,
                dst = __dst || new Mat(height, width, __src.data),
                dstData = dst.data;
            var size1 = __size1 || 3,
                size2 = __size2 || size1,
                size = size1 * size2;
            if (size1 % 2 !== 1 || size2 % 2 !== 1) {
                console.error("size大小必须是奇数");
                return __src;
            }
            var startX = Math.floor(size1 / 2),
                startY = Math.floor(size2 / 2);
            var withBorderMat = copyMakeBorder(__src, startY, startX, 0, 0, __borderType),
                mData = withBorderMat.data,
                mWidth = withBorderMat.col;

            var newValue, nowX, offsetY, offsetI;
            var i, j, c, y, x;

            for (i = height; i--;) {
                offsetI = i * width;
                for (j = width; j--;) {
                    for (c = 3; c--;) {
                        newValue = 0;
                        for (y = size2; y--;) {
                            offsetY = (y + i) * mWidth * 4;
                            for (x = size1; x--;) {
                                nowX = (x + j) * 4 + c;
                                newValue += mData[offsetY + nowX];
                            }
                        }
                        dstData[(j + offsetI) * 4 + c] = newValue / size;
                    }
                    dstData[(j + offsetI) * 4 + 3] = mData[offsetY + startY * mWidth * 4 + (j + startX) * 4 + 3];
                }
            }

        } else {
            console.error("不支持类型。");
        }
        return dst;
    }

    function getGaussianKernel(__n, __sigma) {
        var SMALL_GAUSSIAN_SIZE = 7,
            smallGaussianTab = [[1],
                                [0.25, 0.5, 0.25],
                                [0.0625, 0.25, 0.375, 0.25, 0.0625],
                                [0.03125, 0.109375, 0.21875, 0.28125, 0.21875, 0.109375, 0.03125]
            ];

        var fixedKernel = __n & 2 == 1 && __n <= SMALL_GAUSSIAN_SIZE && __sigma <= 0 ? smallGaussianTab[__n >> 1] : 0;

        var sigmaX = __sigma > 0 ? __sigma : ((__n - 1) * 0.5 - 1) * 0.3 + 0.8,
            scale2X = -0.5 / (sigmaX * sigmaX),
            sum = 0;

        var i, x, t, kernel = [];

        for (i = 0; i < __n; i++) {
            x = i - (__n - 1) * 0.5;
            t = fixedKernel ? fixedKernel[i] : Math.exp(scale2X * x * x);
            kernel[i] = t;
            sum += t;
        }

        sum = 1 / sum;

        for (i = __n; i--;) {
            kernel[i] *= sum;
        }

        return kernel;
    };

    function GaussianBlur(__src, __size1, __size2, __sigma1, __sigma2, __borderType, __dst) {
        if (__src.type && __src.type == "CV_RGBA") {
            var height = __src.row,
                width = __src.col,
                dst = __dst || new Mat(height, width, __src.data),
                dstData = dst.data;
            var sigma1 = __sigma1 || 0,
                sigma2 = __sigma2 || __sigma1;
            var size1 = __size1 || Math.round(sigma1 * 6 + 1) | 1,
                size2 = __size2 || Math.round(sigma2 * 6 + 1) | 1,
                size = size1 * size2;
            if (size1 % 2 !== 1 || size2 % 2 !== 1) {
                console.error("size必须是奇数。");
                return __src;
            }
            var startX = Math.floor(size1 / 2),
                startY = Math.floor(size2 / 2);
            var withBorderMat = copyMakeBorder(__src, startY, startX, 0, 0, __borderType),
                mData = withBorderMat.data,
                mWidth = withBorderMat.col;

            var kernel1 = getGaussianKernel(size1, sigma1),
                kernel2,
                kernel = new Array(size1 * size2);

            if (size1 === size2 && sigma1 === sigma2)
                kernel2 = kernel1;
            else
                kernel2 = getGaussianKernel(size2, sigma2);

            var i, j, c, y, x;

            for (i = kernel2.length; i--;) {
                for (j = kernel1.length; j--;) {
                    kernel[i * size1 + j] = kernel2[i] * kernel1[j];
                }
            }

            var newValue, nowX, offsetY, offsetI;

            for (i = height; i--;) {
                offsetI = i * width;
                for (j = width; j--;) {
                    for (c = 3; c--;) {
                        newValue = 0;
                        for (y = size2; y--;) {
                            offsetY = (y + i) * mWidth * 4;
                            for (x = size1; x--;) {
                                nowX = (x + j) * 4 + c;
                                newValue += (mData[offsetY + nowX] * kernel[y * size1 + x]);
                            }
                        }
                        dstData[(j + offsetI) * 4 + c] = newValue;
                    }
                    dstData[(j + offsetI) * 4 + 3] = mData[offsetY + startY * mWidth * 4 + (j + startX) * 4 + 3];
                }
            }

        } else {
            console.error("不支持的类型");
        }
        return dst;
    }

    function medianBlur(__src, __size1, __size2, __borderType, __dst) {
        if (__src.type && __src.type == "CV_RGBA") {
            var height = __src.row,
                width = __src.col,
                dst = __dst || new Mat(height, width, __src.data),
                dstData = dst.data;
            var size1 = __size1 || 3,
                size2 = __size2 || size1,
                size = size1 * size2;
            if (size1 % 2 !== 1 || size2 % 2 !== 1) {
                console.error("size必须是奇数");
                return __src;
            }
            var startX = Math.floor(size1 / 2),
                startY = Math.floor(size2 / 2);
            var withBorderMat = copyMakeBorder(__src, startY, startX, 0, 0, __borderType),
                mData = withBorderMat.data,
                mWidth = withBorderMat.col;

            var newValue = [], nowX, offsetY, offsetI;
            var i, j, c, y, x;

            for (i = height; i--;) {
                offsetI = i * width;
                for (j = width; j--;) {
                    for (c = 3; c--;) {
                        for (y = size2; y--;) {
                            offsetY = (y + i) * mWidth * 4;
                            for (x = size1; x--;) {
                                nowX = (x + j) * 4 + c;
                                newValue[y * size1 + x] = mData[offsetY + nowX];
                            }
                        }
                        newValue.sort();
                        dstData[(j + offsetI) * 4 + c] = newValue[Math.round(size / 2)];
                    }
                    dstData[(j + offsetI) * 4 + 3] = mData[offsetY + startY * mWidth * 4 + (j + startX) * 4 + 3];
                }
            }

        } else {
            console.error("类型不支持");
        }
        return dst;
    };

    function copyMakeBorder(_src, _top, _left, _bottom, _right, _borderType, _value) {
        if (_src.type != "CV_RGBA") {
            console.log("not support this type");
        } else if (_borderType == "BORDER_CONSTANT") {
            return copyMakeConstBorder_8U(_src, _top, _left, _bottom, _right, _value);
        } else {
            return copyMakeBorder_8U(_src, _top, _left, _bottom, _right, _borderType);
        }
    }

    function borderInterpolate(_p, _len, _borderType) {
        if (_p < 0 || _p >= _len) {
            switch (_borderType) {
                case "BORDER_REPLICATE":
                    _p = _p < 0 ? 0 : _len - 1;
                    break;
                case "BORDER_REFLECT":
                case "BORDER_REFLECT_101":
                    var delta = (_borderType == "BORDER_REFLECT_101");
                    if (_len == 1) {
                        return 0;
                    }
                    do {
                        if (_p < 0) {
                            _p = -_p - 1 + delta;
                        } else {
                            _p = _len - 1 - (_p - _len) - delta;
                        }
                    } while (_p < 0 || _p >= _len);
                    break;
                case "BORDER_WRAP":
                    if (_p < 0) {
                        _p -= ((_p - _len + 1) / _len | 0) * _len;
                    }
                    if (_p >= _len) {
                        _p %= _len;
                    }
                    break;
                case "BORDER_CONSTANT":
                    _p = -1;
                default:
                    console.log(arguments.callee, "UNSPPORT_BORDER_TYPE");
            }
        }
        return _p;
    }

    function copyMakeBorder_8U(_src, _top, _left, _bottom, _right, _borderType) {
        var i, j;
        var width = _src.col,
            height = _src.row;
        var top = _top,
            left = _left || _top,
            right = _right || left,
            bottom = _bottom || top,
            dstWidth = width + left + right,
            dstHeight = height + top + bottom,
            borderType = _borderType || "BORDER_REFLECT";
        var buffer = new ArrayBuffer(dstHeight * dstWidth * 4),
            tab = new Uint32Array(left + right);

        for (i = 0; i < left; i++) {
            tab[i] = borderInterpolate(i - left, width, borderType);
        }
        for (i = 0; i < right; i++) {
            tab[i + left] = borderInterpolate(width + i, width, borderType);
        }

        var tempArray, data;

        for (i = 0; i < height; i++) {
            tempArray = new Uint32Array(buffer, (i + top) * dstWidth * 4, dstWidth);
            data = new Uint32Array(_src.buffer, i * width * 4, width);
            for (j = 0; j < left; j++)
                tempArray[j] = data[tab[j]];
            for (j = 0; j < right; j++)
                tempArray[j + width + left] = data[tab[j + left]];
            tempArray.set(data, left);
        }

        var allArray = new Uint32Array(buffer);
        for (i = 0; i < top; i++) {
            j = borderInterpolate(i - top, height, _borderType);
            tempArray = new Uint32Array(buffer, i * dstWidth * 4, dstWidth);
            tempArray.set(allArray.subarray((j + top) * dstWidth, (j + top + 1) * dstWidth));
        }
        for (i = 0; i < bottom; i++) {
            j = borderInterpolate(i + height, height, borderType);
            tempArray = new Uint32Array(buffer, (i + top + height) * dstWidth * 4, dstWidth);
            tempArray.set(allArray.subarray((j + top) * dstWidth, (j + top + 1) * dstWidth));
        }

        return new Mat(dstHeight, dstWidth, new Uint8ClampedArray(buffer));
    }

    function copyMakeConstBorder_8U(_src, _top, _left, _bottom, _right, _value) {
        var i, j;
        var width = _src.col,
            height = _src.row;
        var top = _top,
            left = _left || _top,
            right = _right || left,
            bottom = _bottom || top,
            dstWidth = width + left + right,
            dstHeight = height + top + bottom,
            value = _value || [0, 0, 0, 255];
        var constBuf = new ArrayBuffer(dstWidth * 4),
            constArray = new Uint8ClampedArray(constBuf);
        buffer = new ArrayBuffer(dstHeight * dstWidth * 4);

        for (i = 0; i < dstWidth; i++) {
            for (j = 0; j < 4; j++) {
                constArray[i * 4 + j] = value[j];
            }
        }

        constArray = new Uint32Array(constBuf);
        var tempArray;

        for (i = 0; i < height; i++) {
            tempArray = new Uint32Array(buffer, (i + top) * dstWidth * 4, left);
            tempArray.set(constArray.subarray(0, left));
            tempArray = new Uint32Array(buffer, ((i + top + 1) * dstWidth - right) * 4, right);
            tempArray.set(constArray.subarray(0, right));
            tempArray = new Uint32Array(buffer, ((i + top) * dstWidth + left) * 4, width);
            tempArray.set(new Uint32Array(_src.buffer, i * width * 4, width));
        }

        for (i = 0; i < top; i++) {
            tempArray = new Uint32Array(buffer, i * dstWidth * 4, dstWidth);
            tempArray.set(constArray);
        }

        for (i = 0; i < bottom; i++) {
            tempArray = new Uint32Array(buffer, (i + top + height) * dstWidth * 4, dstWidth);
            tempArray.set(constArray);
        }

        return new Mat(dstHeight, dstWidth, new Uint8ClampedArray(buffer));
    }

    window.imageBlur = imageBlur;
})();
　　调用示例：

var iCanvas = document.getElementById("blur");
var imgBlur = new imageBlur(iCanvas, "images/1.jpg", "BORDER_REFLECT", "right", "blur");
imgBlur.render();
　　效果(核的横向和纵向大小均取为11)：






本文摘自：https://www.cnblogs.com/artwl/archive/2013/01/22/2872355.html
  
 



     返回顶部