专栏首页偏前端工程师的驿站JS魔法堂之实战:纯前端的图片预览

JS魔法堂之实战:纯前端的图片预览

一、前言                                

  图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了。在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上。先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了。

  偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅。

二、准备功夫1──FileReader                        

  FileReader是HTML5的新特性,用于读取Blob和File类型的数据。具体的用法如下:

(1). 构造方式

var fr = new FileReader();

(2). 属性

readyState:类型为unsigned short,FileReader实例的当前状态,(EMPTY——0,还没有加载任何数据;LOADING——1,数据正在加载;DONE——2,已完成全部的读取请求),只读。

result:读取到的文件内容,只读。

error:类型为DOMError,表示在读取文件时发生的错误,只读。

(3). 方法

abort():中止读取操作,并将readyState设置为DONE。当没有执行读取操作时,调用该方法会抛DOM_FILE_ABORT_ERR异常。

readAsArrayBuffer(Blob blob):读取数据,result属性被设置为ArrayBuffer类型

readAsText(Blob blob [, encoding='utf-8']):读取数据,result属性被设置为String类型

readAsBinaryString(Blob blob):读取数据,result属性被设置为原始二进制数据

readAsDataURL(Blob blob):读取数据,result属性被设置为Data URI Scheme形式(具体请浏览《JS魔法堂:Data URI Scheme介绍》

(4).事件

onload:读取数据成功后触发

onerror:读取数据时抛异常时触发

onloadstart:读取数据前触发

onloadend:读取数据后触发,在onload或onerror后触发

onabort:中止读取后触发

onprogress:读取过程中周期性触发

(5). 浏览器支持

FF3.6+,Chrome7+,IE10+

三、准备功夫2──DXImageTransform.Microsoft.AlphaImageLoader滤镜    

(1). 作用:主要作用是对图片进行透明处理(IE5.5~6并不支持透明的png)

(2). 样式中的使用方式

#preview{
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png");
}

 (3). JS中的使用方式

var preview = document.getElementById('preview');
preview.style.filter = preview.currentStyle.filter + ";progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='dummy.png')";
preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src="dummy1.png";

(4). 属性

enabled:可选项,设置滤镜是否激活。值范围true(默认),false

sizingMethod:可选项,设置滤镜作用的图片在容器边界内的显示方式,值范围crop(剪切图片以适应容器尺寸),image(默认值,增大或缩小容器尺寸以适应图片的尺寸),scale(缩放图片以适应容器尺寸)

src:必填项,使用绝对或相对URL指向背景图片。当URL为用户计算机本地地址时有效, 而img元素的src为用户计算机本地地址时会抛不允许访问本地文件系统的异常。

四、实现                                

接下来我们就利用FileReader的readAsDataURL来获取Data URI Scheme来实现图片预览的功能,而IE5.5~9我们就使用滤镜DXImageTransform.Microsoft.AlphaImageLoader来作降级处理。

html片断:

<style type="text/css">
#preview{
    width: 100px;
    height: 100px;
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
    #preview{
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    }
</style>
<![endif]-->

<input type="file" onchange="showPreview(this);"/>
<div id="preview">
</div>

 js片断:

var preview = function(el){
    var pv = document.getElementById("preview");
    // IE5.5~9使用滤镜
    if (pv.filters && typeof(pv.filters.item) === 'function'){
        pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;
    }
    else{
        // 其他浏览器和IE10+(不支持滤镜)则使用FileReader
        var fr = new FileReader();
        fr.onload = function(evt){
            var pvImg = new Image();
            pvImg.style.width = pv.offsetWidth + 'px';
            pvImg.style.height = pv.offsetHeight + 'px';
            pvImg.src = evt.target.result;
            pv.removeChild(0);
            pv.appendChild(pvImg);
        };
        fr.readAsDataURL(el.files[0]);
    }
};

五、坑                                  

   由于IE11作了安全方面的考虑,使得在input[type=file]元素上通过value、outerHTML和getAttribute的方式都无法获取用户所选文件的真实地址,只能获取到 C:\fakepath\文件名称 。因此假如使用IE11,但文本模式却设置为10以下,那就没木有办法实现图片预览了。

  解决办法1──在head标签下加入这句: <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 。这样就可以告诉IE,默认使用当前IE的最高版本解析、渲染网页了。

  解决办法2──采用 document.selection.createRangeColleciton() 获取真实地址,具体操作如下:

// 假设fileEl就是[type=file]元素
fileEl.select();
var filePath = document.selection.createRangeCollection()[0].htmlText;

六、20140902补充:使用window.URL.createObjectURL代替FileReader        

  通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base64字符串,若图片较大那么字符串则更长,若页面出现reflow时则会导致性能下降。解决方案如下:

  1. 预览的img标签使用绝对定位,从而脱离正常文档流,那么就与文档的其他元素无关了,而reflow时则不会影响性能。

  2. 采用 window.URL.createObjectURL(Blob blob) 生成数据链接。

var createObjectURL = function(blob){
  return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
};

注意: window.URL.createObjectURL 生成的数据链接是独占内存的,因此若不时用时需要调用 window.URL.revokeObjectURL(DOMString objUrl) 来释放内存。在刷新页面时,也会自动释放内容。

var resolveObjectURL = function(blob){
  window[window.webkitURL ? 'webkitURL' : 'URL']['revokeObjectURL'](blob);
};

七、总结                                 

   好吧,现在妈妈再也不担心我的图片预览实现得太麻烦了!

   如果觉得上面的使用方式不方便,可以访问https://github.com/fsjohnhuang/preview/blob/master/preview.js,我已经将其封装成工具函数了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (cljs/run-at (JSVM. :all) "Metadata就这样哦")

    前言  动态类型语言,少了静态类型语言必须声明变量类型的累赘,但也缺失了编译时类型检查和编译时优化的好处。cljs虽然作为动态类型语言,但其提供Metadata...

    ^_^肥仔John
  • (cljs/run-at (JSVM. :all) "Metadata就这样哦")

    ^_^肥仔John
  • TypeScript魔法堂:枚举的超实用手册

    也许前端的同学会问JavaScript从诞生至今都没有枚举类型,我们不是都活得挺好的吗?为什么TypeScript需要引入枚举类型呢? 也许被迫写前端的后端同...

    ^_^肥仔John
  • 谷歌大脑深度学习从入门到精通视频课程[5.7]:受限玻尔兹曼机——例子介绍

    AI100 已经引入 Hugo Larochelle 教授的深度学习课程,会每天在公众号中推送一到两节课,并且对视频中的 PPT 进行讲解。课后,我们会设计一...

    AI科技大本营
  • 使用Spark SQL构建批处理程序

    在批处理模式下,所有的数据源和输出都各自有一个固定的模块(使用了Spark的Datasource API),然后对模块做配置即可,无需使用不同的模块。

    用户2936994
  • PSR-2 编码规范

    本规范希望通过制定一系列规范化 PHP 代码的规则,以减少在浏览不同作者的代码时,因代码风格的不同而造成不便。

    小白程序猿
  • 一日一技:Python的bytes型数据的迭代特征

    Bytes类型是Python 3引入的一个基本数据类型。调用Bytes类型的 .decode()方法可以把它变成Python 3的 str类型。调用 str类型...

    青南
  • replication-manager 编译

    replication-manager 和 orchestrator  这2款软件是以后的趋势

    二狗不要跑
  • Jmeter(三十三) - 从入门到精通 - Jmeter Http协议录制脚本工具-Badboy6(详解教程)

      今天分享的就是在上一篇文章的基础上来进行讲解和分享:Badboy使用数据源Excel进行脚本参数化。然后在使用读取的参数进行对比断言。

    北京-宏哥
  • 小前端·大后台

    小前端要足够灵活,大后台则要有足够强的资源整合能力和服务提供能力,这就是未来商业变革的核心。——《商业价值》 阿富汗战争启示 苏军攻占阿富汗动用10 万以上的军...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券