2020-9-4日：Canvas 2d上下文：图像数据getImageData()；

  • getImageData():
  1. 参数（4个）： 取得其数据的画面区域的 x和 y坐标；该区域的像素宽度和高度；
  2. 作用：取得原始图像数据；
  3. 画布“干净”的情况下（即图像并非来自其他域），才可以取得图像数据。 【非跨域】

 

例：

取得左上角 坐标为(10,5)、大小为 50×50像素的区域的图像数据

var imageData = context.getImageData(10, 5, 50, 50);

说明：

  1. 返回的对象是 ImageData 的实例；
  2. ImageData 对象都有三个属性：width、height 和 data；
  3. data 属性是一个数组，保存着图像中每一个像素的数据；

  4. 每一个像素用4个元素来保存；分别表示红、绿、蓝和透明度值。

  5. 第一个像素的数据就保存在数组的第 0到第 3个元素中；

 

var data = imageData.data, 
red = data[0],    
green = data[1],   
blue = data[2],     
alpha = data[3];

 

数组中每个元素的值都介于 0到 255之间（包括 0和 255）；

 

例子:

灰阶过滤器-获取图像的黑白版。 

　　

 1 var drawing = document.getElementById("drawing"); 
 2 //确定浏览器支持<canvas>元素 
 3 if (drawing.getContext){ 
 4     var context = drawing.getContext("2d"),
 5     image = document.images[0],imageData, 
 6     data,
 7     i,
 8     len, 
 9     average,
10     red, 
11     green, 
12     blue, 
13     alpha; 
14     //绘制原始图像     
15     context.drawImage(image, 0, 0); 
16     //取得图像数据     
17     imageData = context.getImageData(0, 0, image.width, image.height);     
18     data = imageData.data; 
19     for (i=0, len=data.length; i < len; i+=4){ 
20         red = data[i];
21         green = data[i+1];
22         blue = data[i+2];
23         alpha = data[i+3]; 
24         //求得 rgb 平均值         
25         average = Math.floor((red + green + blue) / 3); 
26         //设置颜色值，透明度不变
27         data[i] = average;
28         data[i+1] = average;
29         data[i+2] = average; 
30     }        
31     //回写图像数据并显示结果     
32     imageData.data = data;     
33     context.putImageData(imageData, 0, 0); 
34 }
  1.  for 循环遍历了图像数 据中的每一个像素;
  2. 取得每个像素的红、绿、蓝颜色值
  3. 计算出它们的平均值。再把这个平均值设置为每个颜色的值
  4. 结果就是去掉了每个像素的颜色， 只保留了亮度接近的灰度值（即彩色变黑白）

 

　　

 　　

posted @ 2020-09-04 16:17  Amber丶Li  阅读(1288)  评论(0)    收藏  举报