用JS怎么做上传图片时的截图？

用JS怎么做上传图片时的截图？
类似于上传QQ图像时可以截取图像的一部分
用Js或者JQuery怎么写？
希望高手能够提供代码

解决方案 »

  1.   

    如果你是说要做图片裁剪显示
    那么用style.clip方法
    参数自己查询
    这样裁剪只是显示图片的部分
    并不会实际减少图片大小
      

  2.   

    只兼容 IE，火狐效果网上搜搜未实现截取一部分
    <script type="text/javascript">   
    function loadimg(){
    var img = new Image();
    img.src=document.all.file.value;  
    alert( '上传图片的宽度为' + img.width + 
      '上传图片的高度为'+img.height+'上传图片的大小为'+size(img.fileSize));
    document.getElementById('picdemo').src = img.src;
    }
    function size(len){
    var kb=len/1024;
    if(kb<1024)
    return kb.toFixed(2)+"K";
    else
    {
    var m=kb/1024;
    return m.toFixed(2)+"M";
    }
    }
    </script>    
    <table width="90%" border="0" cellspacing="0" cellpadding="0">   
        <tr> 
            <td>
                 <img width="60" height="60" id="picdemo">
            </td>
            <td>   
              <input  type="file"  id="file" class="allinput" onchange="loadimg();" />&nbsp;   
              <input  type="submit"  name="submit"  value="上传" />   
            </td>   
        </tr>   
      </table>  
    <select name="mysele" id="mysele">
        <option value="请选择">请选择</option>
    </select>
      

  3.   


       1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
        <html xmlns="http://www.w3.org/1999/xhtml">  
        <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>无标题文档</title>  
        <mce:script src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script>  
        <mce:script type="text/javascript"><!--  
        $(function(){  
       });  
       // --></mce:script>   
       <mce:script language="JavaScript"><!--  
          
       /*function SetImgSize(img) {  
           var maxWidth = 300;  
           var maxHeight = 300;  
           var imgimgWidth = img.width;  
           var imgimgHeight = img.height;  
             
           if(imgWidth <= maxWidth && imgHeight <= maxHeight) {  
           }  
           else {  
               if((maxWidth / maxHeight) > (imgWidth / imgHeight)) {  
                   img.style.height = maxHeight + "px";  
                   img.style.width = imgWidth * (maxHeight / imgHeight) +  "px";  
               }  
               else {  
                   img.style.width = maxWidth +"px";  
                   img.style.height = imgHeight * (maxWidth / imgWidth) +"px";  
               }  
           }  
       }*/  
       function SetImgSize(img) {  
           var maxWidth = 300;  
           var maxHeight = 300;  
           var imgimgWidth = img.width;  
           var imgimgHeight = img.height;  
             
           if(imgWidth <= maxWidth && imgHeight <= maxHeight) {  
           }  
           else {  
               if((maxWidth / maxHeight) > (imgWidth / imgHeight)) {  
                   img.style.height = maxHeight + "px";  
                   img.style.width = imgWidth * (maxHeight / imgHeight) +  "px";  
               }  
               else{  
                   img.style.width = maxWidth +"px";  
                   img.style.height = imgHeight * (maxWidth / imgWidth) +"px";  
               }  
           }  
       }  
       function large(){  
           var maxWidth = 300;  
           var maxHeight = 300;  
           var img = document.getElementById("img");  
           var imgimgWidth = img.width;  
           alert(imgWidth)  
           var imgimgHeight = img.height;  
           if(imgWidth <= maxWidth && imgHeight <= maxHeight){  
               //等比例  
               if((maxWidth / maxHeight) > (imgWidth / imgHeight)){  
                   alert("3")  
                   img.style.height = imgHeight*1.2 + "px";  
                   img.style.width = imgWidth*1.2 + "px";  
                   alert(imgHeight*2 + "px")  
               }else{  
                   img.style.height = imgHeight*1.2 + "px";  
                   img.style.width = imgWidth*1.2 + "px";  
               }  
           }else{  
               alert("太大了")  
               return;  
           }  
       }  
       // --></mce:script>  
       </head>   
       <body>   
       <img src="3.jpg" mce_src="3.jpg" id="img" /> <br />  
       <input type="button" value="放大" id="large" onclick="large()" />  
       <input type="button" value="缩小" id="small" onclick="small()" />  
       </body>   
      </html>  来控制图片的大小，修改一下就可以控制显示部分
      

  4.   

    用户的屏幕属于隐私信息，浏览器是不会直接支持的
    除非写成ActiveX用IE调用，相当于开发flash类似的浏览器插件。