在研究关于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>