【前端图片处理】图片预览篇

摘要: 在开发中遇到图片的时候，往往我们有这样的需求，图片在上传到服务器之前，我们想对其进行预览。然而不同的浏览器对图像片预览支持的程度不同，为此，我们可以通过选择合适的方法，兼容不同的浏览器，使得用户获得相同或者类似的体验。内容整理如下，有不妥之处，望不吝指出。

1、IE6-9:

整体思路：

IE6可直接从file的value直接获取本地路径，IE7-9则处于安全考虑不再支持，这里可以通过filter模式来实现预览。
注：IE6也可以用filter模式。

注意问题：

1）filter模式下img会默认显示小图标，需要一个透明图片来去掉。
2）IE6、7不支持DATA URI，但支持mhtml，通过mhtml可把透明图像数据写在文件头注释部分，可减少一个请求。
3）IE10以下不支持在单个file控件中选择多个文件。
注：支持单个file控件多选文件的浏览器需添加mutiple属性：<inputtype="file"id="file"multiple>
4）IE7-9可通过以下方法获取路径：
file.select();
document.selection.createRange().text;
5）IE10环境下可测试IE7-IE10版本，而且带有控制台（按F12可打开控制台）。IE6则没有控制台。
6）关于滤镜，这里简单提下：
它包括三个属性：enabled（滤镜是否激活），sizingMethod（图像显示方式）和src（图像路径）。
程序主要使用后面两个属性。
sizingMethod有三种方式：
crop：剪切图片以适应对象尺寸；
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸；
scale：缩放图片以适应对象的尺寸边界。

2、对于支持Window.URL/FileReader API的浏览器。

目前主流浏览器中，只有IE10+、FF22/23、Chrome28/29、Opera16支持FileReader API。opera不支持createObjectURL/revokeObjectURL方法，可以用FileReader对象来处理。

3、非IE及不支持FileReader API的浏览器，需要后台支持。

可通过iframe无刷新上传图片后，通过服务器返回图片数据或路径给img.src赋值实现预览。

4、基于以上几点，封装了如下代码。

关于程序的几点说明：

1）程序的file和img参数分别表示file控件和将要预览的图片容器。
2）传入options参数是一个对象，可指定options的width、ratio属性，一般只设置width属性，高度自适应。
3）尚缺后台支持部分的代码。

4）代码亲测。

代码：

/*
Content-Type: multipart/related; boundary="_CLOUDGAMER"
--_CLOUDGAMER
Content-Location:blankImage
Content-Transfer-Encoding:base64
R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw==
*/
var isIE = !! window.ActiveXObject,
isIE6 = isIE && !window.XMLHttpRequest,
isIE8 = isIE && document.documentMode > 7,
isIE7 = isIE && !isIE6 && !isIE8,
abPath = "";
// IE6/7下不支持DATA URI，支持mhtml，abPath保存当前文件绝对路径
if (isIE6 || isIE7) {
for (var j = 0, len = document.scripts.length; j < len; j++) {
var str = "";
// 4表示返回完整路径的url地址
str = document.scripts[j].getAttribute("src", 4) || document.scripts[j].src;
// console.log(str);
if (str) {
var i = str.lastIndexOf('/');
if (i >= 0 && str.substring(i + 1) == "imgutil.js") {
abPath = str;
break;
}
}
}
}
// console.log(abPath);

// 1*1的透明图片
var TRANSPARENT = isIE7 || isIE6 ?
"mhtml:" + abPath + "!blankImage" :
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
// console.log(TRANSPARENT);

/*
* @namespace:ImagUtil
* @desc:图片处理
*/
var ImgUtil = {};

/*
* @function:previewImg
* @desc:图片预览
* @arguments:
*  1、file:input[type=file]
*  2、img:存放图像的img元素
*  3、options:object类型，自定义参数，如{width:120,ratio:1}
*
*/
ImgUtil.previewImg = function(file, img, options) {
var DEFALT_WIDTH = 120;
if (file.files && file.files[0]) {
// FileReader,IE10+、FF22/23、Chrome28/29支持
if (typeof FileReader != 'undefined') {
var reader = new FileReader;
reader.onload = function(event) {
event = event || window.event;
img.src = event.target.result;
if (options && options.width) {
img.style.width = options.width ? options.width : DEFALT_WIDTH + "px";
} else {
img.style.width = DEFALT_WIDTH + "px";
}
};
reader.readAsDataURL(file.files[0]);
}
} else if (isIE6) {
// IE6 file.value
if (file.value) {
img.src = file.value;
img.onload = function() {
if (options && options.width) {
img.style.width = options.width || DEFALT_WIDTH + "px";

} else {
img.style.width = DEFALT_WIDTH + "px";
// img.style.width = "500px";
}
img.style.height = "auto";
}
}
} else if (isIE7 || isIE8 || isIE6) {
// IE7/8/（9）都不允许直接使用本地路径显示图片。
// 滤镜预载对象是用滤镜来显示图片，不一定要图像元素

var preload = document.createElement("div"),
body = document.body,
data, oriWidth, oriHeight, ratio;
preload.style.cssText = "width:1px;height:1px;visibility: hidden;position: absolute;left: -9999px;top: -9999px";
// 设置sizingMethod='image'
preload.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')";
body.insertBefore(preload, body.childNodes[0]);
file.select();
try {
data = document.selection.createRange().text;
} finally {
document.selection.empty();
}
if ( !! data) {
data = data.replace(/[)'"%]/g, function(s) {
return escape(escape(s));
});
//预载图片
try {
preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
} catch (e) {
// console.log(e.description);
return;
}
}
// console.log(data);

// preload 预载图片获得原始宽高
oriWidth = preload.offsetWidth;
oriHeight = preload.offsetHeight;

document.body.removeChild(preload);
preload = null;
// 设置 img
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";
// img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = data;

ratio = oriWidth && oriHeight ? oriWidth / oriHeight : 1;
img.style.width = options && options.width ? options.width : DEFALT_WIDTH + "px";
img.style.height = parseInt(oriHeight ? oriHeight : DEFALT_WIDTH) * ratio + "px";

// 遮罩小图标
img.src = TRANSPARENT;
} else {
// 上传后回显，暂无实现
}
}