2.9.2 获取图片像素数据_WebRTC技术详解：从0到1构建多人视频会议系统-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

2.9.2　获取图片像素数据

代码清单2-61展示了获取图片像素数据的方法。首先创建一个Image对象，把背景图片作为Image对象的源，然后在Image对象的onload事件句柄中创建canvas，并将Image对象绘制在canvas上，最后使用canvas方法getImageData()获取图片RGBA像素数据。

代码清单2-61　获取图片像素数据

getImageFrame() {
  const backgroundImg = new Image();
  backgroundImg.src = 'media/beach.jpg';
  backgroundImg.onload = () => {
    const imageCanvas = document.createElement('canvas');
    imageCanvas.width = this.width;
    imageCanvas.height = this.height;
    const ctx = imageCanvas.getContext('2d');
    ctx.drawImage(backgroundImg,0,0,this.width,this.height);
    this.imageFrame = ctx.getImageData(0, 0, this.width, this.height);
    this.timerCallback();
  }
}

getImageData()方法获取的像素数据会保存在this.imageFrame.data中，类型为Uint8ClampedArray，每个像素由4个Uint8整数组成，分别表示R（红）、G（绿）、B（蓝）、A（透明度）数据，整数取值范围为0～255。