纯前端实现图片预览：picturePreview

2018-01-23

字数统计: 428字 | 阅读时长≈ 2分

网上有很多实现了前端预览功能的小插件，但大多功能不完善，要么兼容性差，要么支持的图片格式有限；我在 Github 上看到了两个大神（fsjohnhuang 和 alessiomaffeis）写的代码，收益良多，写的很好，但是也有些小瑕疵；比如 alessiomaffeis 的代码很简洁，但是兼容性不好，IE8 就不行了，fsjohnhuang 的代码兼容性很好，针织能兼容到 IE6，但是他的代码预览的图片大小强制跟第一级父容器一样。

于是我融合了两位大神的优点，整合除了下面这个能兼容 IE6 ~ IE11、Chrome、Firefox、Safari 和 Opera，且预览的图片能自适应的前端图片预览插件：picturePreview。

Demo 代码：

<input type="file" id="loadPng" accept="image/x-png"/>&nbsp;<button onclick="pv1.reset()">重置</button>
<div class="preview" id="pv1"></div>

<input type="file" id="loadJpg" accept="image/jpg"/>&nbsp;<button onclick="pv2.reset()">重置</button>
<div class="preview" id="pv2"></div>

<script type="text/javascript" src="./picturePreview.min.js"></script>

<script type="text/javascript">
	var get = function(id){
		return document.getElementById(id);
	};
	Preview.defaults.onSuccess = false;
	Preview.defaults.onFailed = true;
	var pv1 = new Preview(get('loadPng'), get('pv1'), {
		onSuccess: function(path, ext, accept){
			alert(this === pv1);
			alert('path:' + path);
			alert('extension:' + ext);
			alert('accept:' + accept);

			return true;
		},
		onFailed: function(){
			alert("Load image Failed!");
			} 
	});
	var pv2 = new Preview(get('pv2'), get('loadJpg'));
</script>

Demo 说明

方法主体是：Preview(arg1, arg2, {})

参数：

arg1：预览图片的容器；
arg2：type 为 file 的 Button；
{}：可设置预览图片成功和失败的函数体；

Demo 链接

https://github.com/fsjohnhuang/preview/blob/master/preview.js

本文作者： Alvin
本文链接： https://alvinyw.github.io/2018/01/2/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！