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

最新推荐文章于 2022-05-30 14:37:16 发布

原创

最新推荐文章于 2022-05-30 14:37:16 发布 · 1.5w 阅读

标签

#firefox #chrome #ie #function #filter

本文介绍了如何解决在新版Chrome、Firefox及IE浏览器中，使用本地图片等比例缩放预览的问题。由于旧方法在新版本浏览器中失效，作者提供了一种新的实现方式，利用HTML5特性在现代浏览器中实现该功能。

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

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

<!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.in

最低0.47元/天解锁文章