HTML5网页摄像头与网络相册

1、html5网页摄像头与网络相册向来以来，在网页上挺直拍照片，通过几行代码就可以调动硬件摄像头是不行能实现的，而html5却把这个幻想般的功能变成了现实。 1.在web中拍照示例本例中，我们用法html5里的getusermedia来演示在web中举行拍摄的功能，如下图： 本例代码如下所示： 网页拍照功能 / * * / 拍照功能 /> 关闭提醒 / picbutton > 拍照 保存此 放弃此 关闭 / 此扫瞄器不支持读取摄像头 ； 函数v_success（stream） video_element.src = stream; /注重，此处视频的宽高尺寸应当照以下代码读取 / al

2、ert（video_element.clientwidth + ， + video_element.clientheight） 函数v_error（error） opera.posterror（错误！错误码为： + error.code）; function snapshot（） /拍摄函数 var canvas = document.createelement（&39;canvas&39; ）; var vw = video_element.clientwidth; var vh = video_element.clientheight; var vvw = video_el

3、ement.videowidth; var vvh = video_element.videoheight; canvas.width = vw; canvas.height = vh; video_element.width = vw; video_element.height = vh; canvas.classname = pic ; var _a = new date（）。gettime（）; canvas.id = localstorage.cameraid_opera + canvas + _a; /生成照片的id var deg = getdeg（）; canvas.style.

4、otransform = rotate（ + deg + deg） ; canvas.style.moztransform = rotate（ + deg + deg） ; canvas.style.webkittransform = rotate（ + deg + deg） ; canvas.style.mstransform = rotate（ + deg + var footer = document.queryselector（ pictures ）; if（localstorage.lastcanvasid = 0） footer.appendchild（canvas）; local

5、storage.lastcanvasid = localstorage.cameraid_opera + canvas + _a; else footer.insertbefore（canvas，$（localstorage.lastcanvasid）; localstorage.lastcanvasid = localstorage.cameraid_opera + canvas + _a; var c = canvas; var ctx = c.getcontext（&39;2d&39; ）; var cw = vw; var ch = vh; ctx.fillstyle

6、= fff ; ctx.fillrect（0，0，cw，ch）; ctx.drawimage（video_element，0，0，vvw，vvh，0,0，vw， applyevents（）; 函数applyevents（） /大事绑定函数 var elems = document.queryselectorall（&39;canvas&39; ）; for（var i = 0; i 15.5） var canvass = document.queryselectorall（&39;canvas&39; ）; var polaroid = document.queryselector（&39;pictures&39; ）; for（var i = 0; i 2.本例小结本例在网页上实现拍摄，代码极其容易。在这个例子中，我们原来做得较多复杂，但是演示时将一些代码注释掉了，从而将拍到的照片写入画布，然后从画布中再获得数据传输到网络中（当网络不通顺的时候，暂时存在本地），轻松变成了一个网络相册。 但是，这里有一个极为重要的canvas平安问题。canvas与摄像头在定义上是两个不同的数据源，不同的域，因此，不能挺直去本地canvas的数据。 在