覆盖HTML 5输入类型文件,相机与图像/文本从HTML网页

Overlay HTML 5 input type file,camera with an image/text from HTML web page

本文关键字:HTML 图像 文本 网页 输入 类型 文件 覆盖 相机      更新时间:2023-09-26

我正在使用HTML 5输入类型控件进行捕获:

<input type="file" id="take-picture" accept="image/*"
style="position:absolute;top:-50;left:-50;"  />

使用这个我能够看到相机并能够捕捉,但是我想在相机实时feed的顶部显示文本或图像。 ?

  1. 怎么做
  2. 是否可以在HTML页面中显示摄像机的div控制区域?

您只需要添加一个覆盖的div,就像下面的示例:

http://jsfiddle.net/XbZMX/{点击'iniciar'按钮}

#overlay{color:red;position:absolute}

可以使用HTML5的getusermedia功能显示直播摄像头。你应该检查一下:http://www.html5rocks.com/en/tutorials/getusermedia/intro/

一旦你得到它的工作,你可以添加一些CSS悬停文本。就像处理图片一样