在研究关于web连接摄像头拍照功能的时候,将拍完的照片通过拍照按钮直接生成一个预览图片功能,可是在预览的时候网页显示图片是个小×,在小×上右键显示图片就能正确显示出来,在google上查原因说是图片缓存的问题可是都没有解决办法,所以各位告诉帮忙看下。
调用摄像头预览功能html代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache,no-store" />
<title>照片采集系统</title><!-- paste this code into your webpage -->
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
<!-- end --><style>body{
margin:0;
padding:0;
background:#f1f1f1;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:150%;
text-align:left;
}
a{
text-decoration:none;
color:#057fac;
}
a:hover{
text-decoration:none;
color:#999;
}
h1{
font-size:140%;
margin:0 20px;
line-height:80px;
}
h2{
font-size:120%;
}
#container{
margin:0 auto;
width:680px;
background:#fff;
padding-bottom:20px;
}
#content{margin:0 20px;}
p.sig{
margin:0 auto;
width:680px;
padding:1em 0;
}
form{
margin:1em 0;
padding:.2em 20px;
background:#eee;
}
</style>
<script LANGUAGE=JavaScript>
var iniflag=1;
function unicode(s)
{
var len=s.length;
var rs="";
for(var i=0;i<len;i++)
{
var k=s.substring(i,i+1);
rs+="&#"+s.charCodeAt(i)+";";
}
return rs;
}
function runicode(s)
{
var k=s.split(";");
var rs="";
for(i=0;i<k.length;i++)
{
var m=k[i].replace(/&#/,"");
rs+=String.fromCharCode(m);
}
return rs;
} function start_preview(url)
{
ELOAMCTRL.StartPreview();
if(iniflag==1)
{
var num= ELOAMCTRL.GetColorSpaceOutputsizeNum(0);
var selindex;
iniflag=0;
var width = ELOAMCTRL.GetMediaWidth();
var height= ELOAMCTRL.GetMediaHeight();
for(i=0;i<num;i++)
{
var w=ELOAMCTRL.GetOutPutSizeWidth(0,i);
var h=ELOAMCTRL.GetOutPutSizeHeight(0,i);
var str=w.toString()+"X"+h.toString();
addoption(str);
if(w==width)selindex=i;
}
seloption(selindex);
}
}
function stop_preview(url)
{
ELOAMCTRL.StopPreview();
}
function TakePic(url)
{
var enable=0; today=new Date();
var day; var date; var clocktext;
var time_start = new Date();
var clock_start = time_start.getTime();
var path= "c:\\"+clock_start+".jpg";
//var path= "c:\\1.jpg";
ELOAMCTRL.SetJpgQuality(75);
ELOAMCTRL.Do_SnapShot(path, 0, 0, 0, 0);
FileChange(path);
}
function deloption()
{
var obj=document.getElementById("sel").options;
if (obj.length > 1)
{
obj.options.remove(obj.length - 1);
}
}
function seloption(index)
{
var objSelect=document.getElementById("sel").options;
objSelect.options[index].selected = true;
}
function addoption(s)
{
var obj=document.getElementById("sel").options;
var opt = new Option(s, obj.length );
obj.options.add(opt);
}
function changesize()
{
var num= ELOAMCTRL.GetColorSpaceOutputsizeNum(0);
var obj=document.getElementById("sel").options;
var x = obj.selectedIndex; if(x<num)
{
var w=ELOAMCTRL.GetOutPutSizeWidth(0,x);
var h=ELOAMCTRL.GetOutPutSizeHeight(0,x);
ELOAMCTRL.ShowVideoOutpsize(w,h);
}
else window.alert("Out of Range");
}
</script>
<script>
function DrawImage(ImgD){
//alert(ImgD.src);
var preW = 400;
var preH = 480 ;
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= preW/preH){
if(image.width>preW){
ImgD.width=preW;
ImgD.height=(image.height*preW)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>preH){
ImgD.height=preH;
ImgD.width=(image.width*preH)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
return true;
}
function FileChange(Value){
//alert(Value);
flag=false;
//var i = Math.random();
document.getElementById("uploadimage").width=400;
document.getElementById("uploadimage").height=480;
document.getElementById("uploadimage").alt="";
document.getElementById("uploadimage").src=Value;
}
</script>
</head><body><div id="container">
<div id="content">
<table cellspacing="0" cellpadding="0" width="1040">
<tr>
<th>照片采集</th>
<th>照片预览</th>
</tr>
<tr>
<td width="640" height="480">
<object classid="clsid:30091f84-eb83-4f4e-9b79-3710e0f4a2e9" id=ELOAMCTRL CODEBASE="*.cab#version=1,0,0,1" width=640 height=480></object>
<br />
<form>
<input TYPE="button" VALUE="开始预览" onClick="start_preview()">
<input TYPE="button" VALUE="停止预览" onClick="stop_preview()">
<input TYPE="button" VALUE="拍照" onClick="TakePic()">
<select name="sel" onchange="changesize()">
</select>
</form>
</td>
<td width="400" height="480">
<IMG id="uploadimage" height="0" width="0" src="" onLoad="javascript:DrawImage(this);" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
调用摄像头预览功能html代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache,no-store" />
<title>照片采集系统</title><!-- paste this code into your webpage -->
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
<!-- end --><style>body{
margin:0;
padding:0;
background:#f1f1f1;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:150%;
text-align:left;
}
a{
text-decoration:none;
color:#057fac;
}
a:hover{
text-decoration:none;
color:#999;
}
h1{
font-size:140%;
margin:0 20px;
line-height:80px;
}
h2{
font-size:120%;
}
#container{
margin:0 auto;
width:680px;
background:#fff;
padding-bottom:20px;
}
#content{margin:0 20px;}
p.sig{
margin:0 auto;
width:680px;
padding:1em 0;
}
form{
margin:1em 0;
padding:.2em 20px;
background:#eee;
}
</style>
<script LANGUAGE=JavaScript>
var iniflag=1;
function unicode(s)
{
var len=s.length;
var rs="";
for(var i=0;i<len;i++)
{
var k=s.substring(i,i+1);
rs+="&#"+s.charCodeAt(i)+";";
}
return rs;
}
function runicode(s)
{
var k=s.split(";");
var rs="";
for(i=0;i<k.length;i++)
{
var m=k[i].replace(/&#/,"");
rs+=String.fromCharCode(m);
}
return rs;
} function start_preview(url)
{
ELOAMCTRL.StartPreview();
if(iniflag==1)
{
var num= ELOAMCTRL.GetColorSpaceOutputsizeNum(0);
var selindex;
iniflag=0;
var width = ELOAMCTRL.GetMediaWidth();
var height= ELOAMCTRL.GetMediaHeight();
for(i=0;i<num;i++)
{
var w=ELOAMCTRL.GetOutPutSizeWidth(0,i);
var h=ELOAMCTRL.GetOutPutSizeHeight(0,i);
var str=w.toString()+"X"+h.toString();
addoption(str);
if(w==width)selindex=i;
}
seloption(selindex);
}
}
function stop_preview(url)
{
ELOAMCTRL.StopPreview();
}
function TakePic(url)
{
var enable=0; today=new Date();
var day; var date; var clocktext;
var time_start = new Date();
var clock_start = time_start.getTime();
var path= "c:\\"+clock_start+".jpg";
//var path= "c:\\1.jpg";
ELOAMCTRL.SetJpgQuality(75);
ELOAMCTRL.Do_SnapShot(path, 0, 0, 0, 0);
FileChange(path);
}
function deloption()
{
var obj=document.getElementById("sel").options;
if (obj.length > 1)
{
obj.options.remove(obj.length - 1);
}
}
function seloption(index)
{
var objSelect=document.getElementById("sel").options;
objSelect.options[index].selected = true;
}
function addoption(s)
{
var obj=document.getElementById("sel").options;
var opt = new Option(s, obj.length );
obj.options.add(opt);
}
function changesize()
{
var num= ELOAMCTRL.GetColorSpaceOutputsizeNum(0);
var obj=document.getElementById("sel").options;
var x = obj.selectedIndex; if(x<num)
{
var w=ELOAMCTRL.GetOutPutSizeWidth(0,x);
var h=ELOAMCTRL.GetOutPutSizeHeight(0,x);
ELOAMCTRL.ShowVideoOutpsize(w,h);
}
else window.alert("Out of Range");
}
</script>
<script>
function DrawImage(ImgD){
//alert(ImgD.src);
var preW = 400;
var preH = 480 ;
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= preW/preH){
if(image.width>preW){
ImgD.width=preW;
ImgD.height=(image.height*preW)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>preH){
ImgD.height=preH;
ImgD.width=(image.width*preH)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
return true;
}
function FileChange(Value){
//alert(Value);
flag=false;
//var i = Math.random();
document.getElementById("uploadimage").width=400;
document.getElementById("uploadimage").height=480;
document.getElementById("uploadimage").alt="";
document.getElementById("uploadimage").src=Value;
}
</script>
</head><body><div id="container">
<div id="content">
<table cellspacing="0" cellpadding="0" width="1040">
<tr>
<th>照片采集</th>
<th>照片预览</th>
</tr>
<tr>
<td width="640" height="480">
<object classid="clsid:30091f84-eb83-4f4e-9b79-3710e0f4a2e9" id=ELOAMCTRL CODEBASE="*.cab#version=1,0,0,1" width=640 height=480></object>
<br />
<form>
<input TYPE="button" VALUE="开始预览" onClick="start_preview()">
<input TYPE="button" VALUE="停止预览" onClick="stop_preview()">
<input TYPE="button" VALUE="拍照" onClick="TakePic()">
<select name="sel" onchange="changesize()">
</select>
</form>
</td>
<td width="400" height="480">
<IMG id="uploadimage" height="0" width="0" src="" onLoad="javascript:DrawImage(this);" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货