正文
html5拍照上传,h5 手机拍照上传
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何使用HTML5实现拍照上传应用
使用input的上传功能，只要能把图片显示出来，在手机上的时候，会自动调取图片库的，这样直接就实现调用拍照上传功能了
相关问答
Q1: 如何使用HTML5实现利用摄像头拍照上传功能
一，直接上可以代码参考下：
script
//判断浏览器是否支持HTML5 Canvas
window.onload = function () {
try {
//动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持 document.createElement("canvas").getContext("2d");
document.getElementByIdx("support").innerHTML = "浏览器支持HTML5 CANVAS";
}
catch (e) {
document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS";
}
};
//这段代 主要是获取摄像头的视频流并显示在Video 签中
window.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementByIdx("canvas"),
context = canvas.getContext("2d"),
video = document.getElementByIdx("video"),
videoObj = { "video": true },
errBack = function (error) {
console.log("Video capture error: ", error.code);
};
//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
//这个是拍照按钮的事件，
$("#snap").click(function () {
context.drawImage(video, 0, 0, 320, 320);
//CatchCode();
});
}, false);
//定时器
var interval = setInterval(CatchCode, "300");
//这个是 刷新上 图像的
function CatchCode() {
$("#snap").click();
//实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途
var canvans = document.getElementByIdx("canvas");
//获取浏览器页面的画布对象
//以下开始编 数据
var imgData = canvans.toDataURL();
//将图像转换为base64数据
var base64Data = imgData.substr(22);
//在前端截取22位之后的字符串作为图像数据
//开始异步上
$.post("uploadImgCode.ashx", { "img": base64Data }, function (data, status) {
if (status == "success") {
if (data == "OK") {
alert("二维 已经解析");
}
else {
// alert(data);
}
}
else {
alert("数据上 失败");
} }, "text");
}
/script
二.最后的就是接收经过base64编码之后的图像文件了。
public void ProcessRequest (HttpContext context) {
string img;//接收经过base64编 之后的字符串
context.Response.ContentType = "text/plain";
try {
img =context.Request["img"].ToString();
//获取base64字符串
byte[] imgBytes = Convert.FromBase64String(img);
//将base64字符串转换为字节数组
System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);
//将字节数组转换为字节流
//将流转回Image，用于将PNG 式照片转为jpg，压缩体积以便保存。
System.Drawing.Image imgae = System.Drawing.Image.FromStream(stream);
imgae.Save(context.Server.MapPath("~/Test/") + Guid.NewGuid().ToString()+".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);//保存图片
context.Response.Write("OK");//输出调用结果
} catch (Exception msg) {
img = null;
context.Response.Write(msg);
return;
}
}
Q2: html5调用手机摄像头，实现拍照上传功能
html5提供了
navigator.getusermedia接口使用设备摄像头，chrome28上测试已经可用，手机端浏览器测试发现只有opera浏览器可用。
浏览器未完善之前可以使用phonegap完成，它提供了
navigator.camera.getpicture接口，使用js可以方便调用设备摄像头。
Q3: 如何使用HTML5实现拍照上传应
能够在浏览器中获取摄像头与语音流媒体数据将会是件很酷的技术，随着HTML5的进一步规范与拓展，已经可以实现这个技术，这将为web开发带来新的用户体验与应用程序。 蒋宇捷在《如何使用HTML5实现拍照上传应用》 中已经对此技术进行了介绍，我也是从中得到启发的。 但是蒋先生博文中有些东西说的不够具体细化，还有些东西需要补充说明。因此，我就较为详细的介绍一下该技术，
一：运行条件
1：需要chrome 18.0及以上版本，并且需要打开about:flags启用相关功能，也可以使用支持html5的opera浏览器。
2：网页必须运行于服务器端，基于http://的。如果直接在本地磁盘中打开也是没用的，可以启用IIS服务，使用localhost:8080运行该应用。这个需要千万注意！！！
二： 视频流
HTML5推出了The Media Capture API，可以实现对摄像头的访问，关于对音频等接口的使用也可以，具体参考w3c规范。获取的视频流是通过video标签的。我们可以看看蒋先生的示例代码，但是有不完善的地方，我也会加以补充的。
[javascript] view plain copy print?
video id="video" autoplay=""/video
script
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
navigator.getUserMedia('video',success, error);
}
function success(stream) {
video_element.src =stream;
}
/script
但是这段代码对于chrome是不行的，应为navigator.getUserMedia的值不是true,其真正的 是navigator.webkitGetUserMedia, 是chrome的一个拓展。
因此，为了能够同时支持opera和chrome,可以修改上面蒋先生的代码如下：
[javascript] view plain copy print?
var video = document.getElementById("video");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
if (navigator.getUserMedia) //
{
if (navigator.webkitURL)//
{
navigator.getUserMedia("video", function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
}
else //
{
navigator.getUserMedia("video", function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
}
}
三拍照
这需要用到canvas标签与方法了。
学过canvas对象的朋友们知道，drawImage()函数是绘制图形的，但是该函数有数十种重载方法，不仅可以绘制从网页的img 或者本地加载的图片 ， 还可以从video视频流中获取相应的图像数据，甚至具体到任何一帧。这方面的详细介绍可以参考w3c标准。
例如，从video中获取图片并且绘制到canvas画布中可以这样
[javascript] view plain copy print?
var con = document.getElementById("canvas");
var cxt = con.getContext("2d");
con.width=video.videoWeight;
con.height=video.videoHeight;
cxt.drawImage(video, 0, 0);
关于图片上传到服务器端我自己也还不是很懂，大家可以参考蒋先生的做法。
Q4: 怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片
1、实现头的方法代码。
2、编写CSS样式的方法代码。
3、html上传代码。
4、JS处理方法代码。
5、测试结果如下。
注意事项：
JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。
