html5 video 修改读取数据,如何编写Javascript函数以从HTML 5 Video Player获取位图数据？...

您可以使用HTML5 Canvas元素的drawImage函数.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

基本上,您可以创建一个与视频大小相同的画布.

然后,使用canvas.getContext(“ 2d”);获取画布的上下文.

调用上下文的drawImage(sourceVideo,dx,dy)函数. dx和dy都应为0.

然后,通过context.getImageData(sx,sy,w,h);获取画布的图像数据.

将上述图像数据存储到变量中,我将其称为id.

您的pixeldata数组以以下格式存储在id.data中：

`[r,g,b,a,r,a …等]

var canvas = document.createElement("canvas");

canvas.width = video.width;

canvas.height= video.height;

var context= canvas.getContext("2d");

context.drawImage(sourceVideo,0);

var id = context.getImageData(0,video.width,video.height);

for(var y = 0; y < video.height; y++)

{

for(var x = 0; x < video.width; x++)

{

//r = id.data[y*video.width + x + 0]

//g = id.data[y*video.width + x + 1]

//b = id.data[y*video.width + x + 2]

//a = id.data[y*video.width + x + 3]

}

}

希望有帮助！