兼容IE、新版Chrome、Firefox，实现本地图片等比例缩放预览

最新推荐文章于 2021-06-03 10:51:25 发布

HadesCool

最新推荐文章于 2021-06-03 10:51:25 发布

阅读量756

点赞数

以前转载过一篇《兼容IE8、火狐的本地图片预览+等比例缩放》的文章，时至今日在新版的Chrome和Firefox上已经不能用了，原因getAsDataURL方法已经失效。

当然在Chrome、Firefox上可以通过HTML5来实现，今天把它写出来了，见源码：

[html]view plaincopy 
   
 <!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>       
 <style type="text/css">  
 #preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}  
 #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}  
 </style>  
 <script type="text/javascript">  
 function previewImage(file)  
 {  
   var MAXWIDTH  = 100;  
   var MAXHEIGHT = 100;  
   var div = document.getElementById('preview');  
   if (file.files && file.files[0])  
   {  
     div.innerHTML = '<img id=imghead>';  
     var img = document.getElementById('imghead');  
     img.onload = function(){  
       var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
       img.width = rect.width;  
       img.height = rect.height;  
       img.style.marginLeft = rect.left+'px';  
       img.style.marginTop = rect.top+'px';  
     }  
     var reader = new FileReader();  
     reader.onload = function(evt){img.src = evt.target.result;}  
     reader.readAsDataURL(file.files[0]);  
   }  
   else  
   {  
     var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';  
     file.select();  
     var src = document.selection.createRange().text;  
     div.innerHTML = '<img id=imghead>';  
     var img = document.getElementById('imghead');  
     img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;  
     var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
     status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);  
     div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";  
   }  
 }  
 function clacImgZoomParam( maxWidth, maxHeight, width, height ){  
     var param = {top:0, left:0, width:width, height:height};  
     if( width>maxWidth || height>maxHeight )  
     {  
         rateWidth = width / maxWidth;  
         rateHeight = height / maxHeight;  
           
         if( rateWidth > rateHeight )  
         {  
             param.width =  maxWidth;  
             param.height = Math.round(height / rateWidth);  
         }else  
         {  
             param.width = Math.round(width / rateHeight);  
             param.height = maxHeight;  
         }  
     }  
       
     param.left = Math.round((maxWidth - param.width) / 2);  
     param.top = Math.round((maxHeight - param.height) / 2);  
     return param;  
 }  
 </script>       
 </head>       
 <body>  
 <div id="preview">  
     <img id="imghead" width=100 height=100 border=0 src='../images/head01_big.jpg'>  
 </div>  
     <br/>       
     <input type="file" onchange="previewImage(this)" />       
 </body>       
 </html>       