//需要 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>
ios拍照默认是旋转的，有个exif的插件是专门解决这个问题的。js版连接: 网页链接，里面有使用教程。通过这个判断照片的旋转角度之后，可以把它旋转过来再保存，教程：网页链接。如果只有预览需求，直接旋转容器进行显示也是可以的。
一，直接上可以代码参考下：<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
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）