js做截图

function onUploadImgChange(sender){      
    if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){        
        alert('图片格式无效！');   
        return false;       
    }  
    $('#updiv').css('display','inline-block');
    $('#dfdiv').css('display','none');
    var objPreview = document.getElementById( 'preview' );        
    var objPreviewFake = document.getElementById( 'preview_fake' );        
    var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );
    var file=document.getElementById("upload_img");
            
    if( sender.files &&  sender.files[0] ){        
        objPreview.style.display = 'block';        
        objPreview.style.width = 'auto';        
        objPreview.style.height = 'auto';        
        // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径        
//Firefox7.0以下
        //objPreview.src = sender.files[0].getAsDataURL();     
//Firefox8.0
objPreview.src = window.URL.createObjectURL(file.files[0]);
    }else if( objPreviewFake.filters ){         
        // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果        
        //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决                
        // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径        
        sender.select();      
        var imgSrc = document.selection.createRange().text;        
        objPreviewFake.filters.item(        
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;        
        objPreviewSizeFake.filters.item(        
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;        
                
        autoSizePreview( objPreviewFake,         
            objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );        
        objPreview.style.display = 'none';        
    }        
}        
       
function onPreviewLoad(sender){
    autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );      
}
       
function autoSizePreview( objPre, originalWidth, originalHeight ){     
    var zoomParam = clacImgZoomParam( 400, 300, originalWidth, originalHeight );        
    objPre.style.width = zoomParam.width + 'px';        
    objPre.style.height = zoomParam.height + 'px';        
    objPre.style.marginTop = zoomParam.top + 'px';        
    objPre.style.marginLeft = zoomParam.left + 'px';        
}        
       
function clacImgZoomParam( maxWidth, maxHeight, width, height ){        
    var param = { width:width, height:height, top:0, left:0 };        
            
    if( width>maxWidth || height>maxHeight ){        
        rateWidth = width / maxWidth;        
        rateHeight = height / maxHeight;        
                
        if( rateWidth > rateHeight ){        
            param.width =  maxWidth;        
            param.height = height / rateWidth;        
        }else{        
            param.width = width / rateHeight;        
            param.height = maxHeight;        
        }        
    }        
            
    param.left = (maxWidth - param.width) / 2;        
    param.top = (maxHeight - param.height) / 2;              
    return param;        
}


function  callback(msg){
if(msg == 'error'){
alert('上传失败，请重新上传，如有问题联系客服！');
}else{
alert('上传成功！');
}
}








function getSrc(sender){
var src =null;
var file=document.getElementById("upload_img");
var objPreviewFake = document.getElementById('preview_fake' );
// var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );
var objPreview = document.getElementById('preview' );
if( sender.files &&  sender.files[0] ){    
src = window.URL.createObjectURL(file.files[0]);
document.getElementById('preview').src = src;

}else if( objPreviewFake.filters ){  //ie
 sender.select();      
     src = document.selection.createRange().text; 
     objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;
//      objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;  
     objPreview.style.display = 'none';   
     objPreviewFake.style.width = '400px';
}

var  set = $('#preview').offset();
var newMask = document.createElement("div");
  newMask.id = 'm';
  newMask.style.position = "absolute";
  newMask.style.zIndex = "100";
  newMask.style.width = 400 + "px";
  newMask.style.height = 300 + "px";
  newMask.style.top =   set.top+ "px";
  newMask.style.left =  set.left+ "px";
  newMask.style.background = "silver";
  newMask.style.filter = "alpha(opacity=30)";
  newMask.style.opacity = "0.3";
  document.body.appendChild(newMask);
var newDiv = document.createElement("div");
   newDiv.id = "new";
   newDiv.style.position = "absolute";
   newDiv.style.zIndex = "9999";
   newDiv.style.width = 100 + "px";
   newDiv.style.height = 100 + "px";
   newDiv.style.top =  set.top+ "px";
   newDiv.style.left = set.left+ "px";
   newDiv.style.filter = "alpha(opacity=30)";
   newDiv.style.opacity = "0.3";
   newDiv.style.background = "white";
   newDiv.style.border = "1px solid red";
   document.body.appendChild(newDiv);
$(newDiv).mousedown(function(e){
$(newDiv).mousemove(function(e){
var xx=e.pageX;
var yy=e.pageY;
newDiv.style.top = yy + 'px';
newDiv.style.left = xx +'px';
});
});
$(newDiv).mouseup(function(){
$(newDiv).unbind('mousemove');
});

}

<div style="margin-left: 20px;margin-top: 40px;width: 100%">
<%-- <iframe src="flex-ecg/pictureUpload/upload.jsp" height="475px" width="573px" style="border: 0px;margin-top: 20px">
</iframe> --%>
<form method="post" action="user_uploadImage" enctype="multipart/form-data" id="form" target="iframe">
<div style="float: left;display: inline-block;margin-left: 20px">
<input type="file" id="upload_img" οnchange="getSrc(this)" name="filedata" />
<input type="submit" value="确定" style="display: block;margin-top: 150px"/>
</div>
<div style="float: left;">
<div id="preview_fake">
  <img id="preview"  style="width: 400px;height: 300px;background: silver;"/>
</div>
</div>
<%-- <div style="float: left;margin-right: 30px;margin-top: 30px">
<input type="file" id="upload_img" οnchange="onUploadImgChange(this)" name="filedata" />
<br/>       
    <img id="preview_size_fake" /><span id="swh"></span>     
<p style="margin-top: 20px;color: gray;">仅支持JPG、GIF、PNG、BMP文件，且文件小于5M</p>
<input type="submit" value="确定" style="display: block;margin-top: 150px"/>
</div>
<div style="float:left;" >
<div style="display: none;" id="updiv"> 
<div id="preview_wrapper">       
       <div id="preview_fake">       
           <img id="preview" οnlοad="onPreviewLoad(this)" style="width: 400px !important;height: 300px !important"/> 
       </div>       
   </div>       
   <br/>       
   <br/>       
   <img id="preview_size_fake" style="width: 400px !important;height: 300px !important"/><span id="swh"></span>     
</div>
<div id="dfdiv" style="width:400px;height:300px;background: #CCC;display:inline-block;margin-top: 20px;margin-bottom: 20px" align="center">
<img src="user_loadImage"  style="margin-top: 100px;display: block;"/>
</div>
</div> --%>
</form>
<iframe id="iframe" style="display: none" name="iframe"></iframe>
</div>