利用canvas进行 最大邻域法 图像放大

利用html5中的canvas可以进行在线图片处理,下面以放大图片为例来介绍基本方法。

图片放大可以用很多插值方法,比如在html中指定img元素的width属性时,浏览器会自动对其进行插值放大。但一些时候我们需要自定义的插值放大方法,比如下面的链接演示了雷达回波图片的放大,采用了基本的最大邻域法来进行放大,这时需要我们自己来写算法。

先看演示:雷达回波图采用最大邻域法来进行放大

下面是主要的两个处理函数:


//获取图片像素信息
var getImagePixelData = function(img){
    var canvas = $('<canvas>')[0];
    canvas.width = img.width;
    canvas.height = img.height;

    var context = canvas.getContext('2d');//获取2D绘制上下文context 原生API

    context.drawImage(img, 0, 0);//在context中绘制图片 原生API

    return context.getImageData(0,0,img.width, img.height);//获取context中的像素数据 原生API
}

//利用包含图片像素数据的对象imageData 获取 放大后的对象newImageData
var scaleImage = function(imageData, newImageData){

    var ow = imageData.width, oh = imageData.height;

    var scalew = newImageData.width/ow,
    scaleh = newImageData.height/oh;

    var se1, se2, se3;

    var pos = 0, pos2 = 0;

    for(var y = 0; y < oh; y++){
        for(var x = 0; x < ow; x++){

            if(imageData.data[pos+3]){
                for(var ny = Math.floor(y*scaleh); ny < Math.floor((y+1)*scaleh); ny++){
                    for(var nx = Math.floor(x*scalew); nx < Math.floor((x+1)*scalew); nx++){
                        pos2 = (ny*newImageData.height + nx)*4;
                        newImageData.data[pos2] = imageData.data[pos];
                        newImageData.data[pos2+1] = imageData.data[pos+1];
                        newImageData.data[pos2+2] = imageData.data[pos+2];
                        newImageData.data[pos2+3] = imageData.data[pos+3];
                    }
                }

            }
            pos += 4;
        }
    }

    return newImageData;
}
THE END