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

最新推荐文章于 2021-06-05 02:27:12 发布

nhconch

最新推荐文章于 2021-06-05 02:27:12 发布

阅读量1.5w

点赞数 14

分类专栏： JavaScript脚本文章标签： firefox chrome ie function filter xhtml

本文链接：https://blog.csdn.net/nhconch/article/details/7295456

版权

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

摘要由CSDN通过智能技术生成

以前转载过一篇《兼容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;