HTML5的功能实现代码（HTM5上传文件）
随着HTML5规范的支持，为webapp拍照手机上是可能的。下面，我再怎么解释Web应用程序需要一张上面有一个手机，它显示在网页并上传到服务器1。视频流
HTML5媒体捕获API提供可编程访问摄像头，用户可以直接使用getUserMedia得到摄像机提供的视频流，我们需要做的是添加一个HTML5视频标签，把视频从摄像机作为标签的输入源。（注意，Chrome和Opera支持getUserMedia只有现在）。
复制代码代码如下所示：
varvideo_element = document.getelementbyid（&lsquo；videorsquo；）；
如果（导航仪。getUserMedia）{ / / operashoulduseopera.getusermedianow
navigator.getusermedia（&lsquo；videorsquo；成功，错误）；
}
functionsuccess（流）{
video_element SRC =流；
}
视频流
2。照片
在拍照功能上，我们使用HTML5的画布实时捕捉视频标签的内容，视频元素可以作为画布图像的输入，这是很好的：
复制代码代码如下所示：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR的画布document.createelement（&lsquo；canvasrsquo；）；
VaR（CTX = canvas.getcontext &rsquo；2drsquo；）；
大众汽车；
var；
CTX。fillStyle = # ffffff；；
ctx.fillrect（0,0，CW，CH）；
Ctx.drawImage（video_element，0,0，vvw，VVH，0,0，大众，VH）；
document.body.append（帆布）；
三.图像采集
接下来，我们希望从画布获得图像数据。其核心思想是将数据转换成base64位使用帆布帆布todataurl编码的PNG图像，这是类似于数据：图像/ PNG，base64，xxxxx。
复制代码代码如下所示：
无功imgdata = canvas.todataurl（图像/ png）；
因为真正的图像数据编码的逗号base64的一部分，所以我们的实际服务器的图像数据应该是这一部分。我们可以用两种方法得到它。
第一种方法是在前端捕获22位字符串作为图像数据，例如：
复制代码代码如下所示：
VaR数据= imgdata.substr（22）；
如果你想在上传之前获得图片的大小，你可以使用它：
复制代码代码如下所示：
VaR的长度=爱特伯（数据）。长度； / / atobdecodesastrinfdatawhichhasbeenencodedusingbase-64encoding
第二种方法是捕获后端发送的数据，并截取后台语言中的22位字符串：
复制代码代码如下所示：
图像= base64_decode美元（str_replace（&lsquo；数据：图像/ JPEG；base64，rsquo；$数据）；
4。上传图片
在前端，您可以使用Ajax将上面获得的图像数据上传到后台脚本：
复制代码代码如下所示：
美元。后（&lsquo；upload.phprsquo；{ &lsquo；datarsquo；：数据}）；
在后台，我们使用PHP脚本接收数据并将其存储为图片。
复制代码代码如下所示：
functionconvert_data（$数据）{
图像= base64_decode美元（str_replace（&lsquo；数据：图像/ JPEG；base64，rsquo；$数据）；
save_to_file（$图像）；
}
functionsave_to_file（$图像）{
$ FP = fopen（$文件名'；W）；
fwrite（FP美元美元，图像）；
Fclose（$ FP）；
}
请注意，上述解决方案不仅可以用于Web应用程序拍照和上传，还可以将画布的输出转换为图像上传，从而可以使用画布为用户提供图片编辑，如剪贴、着色和涂鸦，然后将用户编辑的图片保存到服务器。