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

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

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

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

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

//获取图片像素信息
var getImagePixelData = function(img){
	var 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;
}