Html5 canvas 位图像素处理getImageData和putImageData

2019独角兽企业重金招聘Python工程师标准>>>

getImageData(int x,int y,int width,int height)：该方法获取canvas上从(x,y)点开始，宽为width、高为height的图片区域的数据，该方法返回的是一个CanvasPixelArray对象，该对象具有width、height、data等属性。data属性为一个数组，该数组每4个元素对应一个像素点。

putImageData(CanvasPixelArray data,int x,int y)：将data里的数据放到canvas中从(x,y)点开始的区域。

下面我们就通过这两个方法实现图片每个像素点的rgb翻转

代码：

 

	
		
		
		
		
		
	
	
		
			您的浏览器不支持canvas标签
		
		
		

		像素翻转
		

		
		
	

 

 

图片像素翻转之后部分效果图，图片太大只能截取局部，看看效果。

 

 

转载于:https://my.oschina.net/jiangli0502/blog/190613