//需要 gumwrapper.min.js 支持
function opencam(){
//alert ("opencam")
if (cam_is_open==0){
var video_html='<video id="myVideo" width="320" height="240" ></video>'
$("#web_cam").html(video_html)//动态加入一个video元素
$("#web_cam").show()
function showSuccess(video) {
// alert('Hey, it works! Dimensions: ' + video.videoWidth + ' x ' + video.videoHeight)
}
function showError(error) {
alert('Oops: ' + error.message)
}
gum = new GumWrapper({video: 'myVideo'}, showSuccess, showError)
gum.play()
cam_is_open=1
$("#opencam_btn").attr("value","关闭镜头")
}else{
location.reload()
}
}
function short_cam(){
$("#photo_div").show()
$("#msg_tips").text("正在生成图片")
var now = new Date()
var cur_time=(now.getHours()<10?"0":"")+now.getHours()+":"
cur_time+=(now.getMinutes()<10?"0":"")+now.getMinutes()+":"
cur_time+=(now.getSeconds()<10?"0":"")+now.getSeconds()
send_time=now.getFullYear()+"-"+((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()<10?"0":"")+now.getDate()
send_time+=" "+cur_time
send_lon=$("#cur_lon").text()
send_lat=$("#cur_lat").text()
var video_cam=document.getElementById("myVideo")
var canvasobj=document.getElementById("photo_canvas")
var ct1=canvasobj.getContext('2d')
ct1.fillStyle="#ffffff"
ct1.fillRect(0,0,640,480)
ct1.drawImage(video_cam,0,0)
ct1.font="25px Georgia"
ct1.fillStyle="#ff4444"
ct1.fillText(send_time,10,50)
ct1.fillText("纬度:"+ send_lat,10,80)
ct1.fillText("经度:"+ send_lon,10,110)
var img_data=canvasobj.toDataURL("mage/png")
var imgobj=document.getElementById("cur_img")
imgobj.src=img_data
$("#web_cam").hide()
$("#msg_tips").text("生成图片完成")
}
function reshort_photo(){
$("#photo_div").hide()
$("#web_cam").show()
}
function send_photo() {
$("#msg_tips").text("图片上传中")
var imgobj=document.getElementById("cur_img").src
//alert (imgobj)
$.ajax({
type:"post",
url:"updategpsp.php",
async:true,
dataType:"text",
data:{img_data:imgobj,send_time:send_time,
rel_lat:rel_lat,rel_lon:rel_lon,
send_lat:send_lat,send_lon:send_lon},
success: function(msg){
if (msg>=1){
$("#msg_tips").text("图片上传完毕")
alert("上传数据成功")
reshort_photo()
}else{
alert("上传数据失败! 请重新传送")
alert(msg)
}
}
})
}
html文件
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=yes">
<title>webcap Test</title>
<style>
body, html,#main_div{width: 100%height: 100%overflow: hiddenmargin:0}
#float_div{position: absolutetop: 5px left:25px border-right: activeborder 1px solid
border-top: activeborder 1px solid border-left: activeborder 1px solid
border-bottom: activeborder 1px solid z-index:9999,width: 300pxheight: auto
overflow: hidden}
#web_cam{width:320px height:240px }
#ctrl_bar_div{width:auto height:auto
border:1px dotted blue margin:0px
padding:3px}
.span1{background-color:#afa }
#cur_img{width:320px height:240px}
#msg_tips{color:redbackground-color:#afa}
#allmap {width: autoheight: 100%overflow: hiddenmargin:0font-family:"微软雅黑"}
</style>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="./js/gumwrapper.min.js"></script>
<script src="../js/Float_math.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请的授权码"></script>
<script src="./js/testhtml5.js"></script>
<script type="text/javascript" >
var gps_star=0
var lat_offset=1.0001390158
var lon_offset=1.0001029614
var bm
var old_Position
var cur_marker
var prive_position
var cam_is_open=0 //记录镜头的打开状态 , 默认为没有开 状态=0
var gum
var send_time=""
var send_lat=""
var send_lon=""
var rel_lat=""
var rel_lon=""
var cur_offset_zt=0
//alert (cur_marker)
$(document).ready(function() {
drawbaiduMap()
bm.centerAndZoom("东莞",18)
})
</script>
</head>
<body>
<div id="main_div">
<div id="allmap"></div>
</div>
<div id="float_div">
<div id="ctrl_bar_div">
<span class="span1" > 纬度:</span>
<span class="span1" id="cur_lat" >000.000000 </span>
<span class="span1" > 经度:</span>
<span class="span1" id="cur_lon" >000.000000 </span>
<input id="is_ver_off_set" type="button" onclick="ver_offset_zt()" value="校正" />
<br>
<input id="gps_btn" type="button" value="开\关GPS" onclick="getLocation()"/>
<input id="opencam_btn" type="button" value="打开镜头" onclick="opencam()"/>
<span id="msg_tips">GPS状态:关闭<span>
</div>
<div id="web_cam" style="display:none" onclick="set_timeout_short()" >
</div>
<div id="photo_div" style="display:none">
<div id="send_btn_div">
<input id="res_hort_btn" type="button" value="重拍" onclick="reshort_photo()"/>
<input id="send_photo_btn" type="button" value="发送" onclick="send_photo()"/>
<input id="canc_btn" type="button" value="取消" onclick="can_photo()"/>
</div>
<div id="canvas_div" style="display:none">
<canvas id="photo_canvas" width="640" height="480" >
"不支持"
</canvas>
</div>
<div id="img_div">
<img id="cur_img"/>
</div>
</div>
</div>
</body>
</html>
1、 视频流HTML5 的 The Media Capture(媒体捕捉) API 提供了对摄像头的可编程访问,用户可以直接用
getUserMedia(请注意目前仅Chrome和Opera支持)获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video
标签,并将从摄像头获得的视频作为这个标签的输入来源。
var video_element=document.getElementById(‘video’)
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error) //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream
}
此时,video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能,实时捕获Video标签的内容,因为Video元素可以作为Canvas图像的输入,所以这一点很好实现。主要代码如下:
var canvas=document.createElement(‘canvas’)//动态创建画布对象
var ctx=canvas.getContext(’2d’)
var cw=vw,ch=vh
ctx.fillStyle=”#ffffff”
ctx.fillRect(0,0,cw,ch)
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh)//将video对象内指定的区域捕捉绘制到画布上指定的区域,可进行不等大不等位的绘制。
document.body.append(canvas)
3、 图片获取
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/pngbase64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”)
这样,imgData变量就存储了一长串的字符数据内容,表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分,所以要让实际服务器收的图像数据应该是这部分,我们可以用两种办法来获取。
第一种:是在前端截取22位以后的字符串作为图像数据,例如:
var data=imgData.substr(22)
如果要在上传前获取图片的大小,可以使用:
var length=atob(data).length//atob 可解码用base-64解码的字串
第二种:是在后端获取传输的数据后用后台语言截取22位以后的字符串(也就是在前台略过上面这步直接上传)。例如PHP里:
$image=base64_decode(str_replace(‘data:image/jpegbase64,’,”,$data)
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用:
$.post(‘upload.php’,{‘data’:data})
在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpegbase64,’,”,$data)
save_to_file($image)
}
function save_to_file($image){
$fp=fopen($filename,’w')
fwrite($fp,$image)
fclose($fp)
}
这个是前台HTML的代码。<div id="contentHolder">
<video id="video" width="320" height="320" autoplay>
</video>
<button id="snap" style="display:none">拍照</button>
<canvas style="display:none" id="canvas" width="320" height="320">
</canvas>
</div>
复制代码
下面这个是主要代码了。(jquery)
<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
}
}