Easyui-Dialog图片预览

特性：

• 支持常用浏览器及IE8以上（包括IE8）浏览器；
• 支持图片路径及Base64编码图片（带Base64图片前缀）；
• 图片宽高默认由当前页面window元素的宽高决定，图片纵横比与原始图片保持一致，不支持放大、缩小、旋转等特殊操作；
• 支持为图片指定class【img-width-**px】、【img-height-**px】、【img-proportion-**%】来设置图片的宽、高及图片放大比例；
• 效果如下图：

实现步骤：

1. 引入Easyui相关资源（下载地址：免费版jquery-easyui-1.5.5.4）；
2. 在需要图片预览的页面加入一下代码：

<!-- 用于图片预览的dialog -->
<div id="dialog" class="easyui-dialog" title="图片预览" data-options="resizable:true,modal:false,closed:true,closeOnEscape:false" >
   <img id="img_id" alt="">
</div>

/**
 * dialog预览图片
* @param imgObj img的jquery对象
 **/
function showImg(imgObj) {
	// 若imgObj为空或imgObj的[src]为【Þ】时，图片无法打开
    if ((imgObj == undefined || imgObj == null || imgObj.length == 0)
    		|| ($(imgObj).attr("src") == "" || /Þ$/i.test($(imgObj).attr("src")))) {
    	$.messager.alert('提示', "该图片无法打开！");
    	return;
    }
    var img = new Image();   
	img.src = $(imgObj).attr("src");
	
	var imgWidth = "";
	var imgHeight = "";
	var imgProportion="";
		// 当<img>的class中配置了"img-width-**px"或"img-height-**px"或"img-proportion-**%"时（仅支持整数），使用对应的图片大小
	var imgClassNames = $(imgObj).prop("class");
	if (imgClassNames != undefined && imgClassNames != "") {
		var imgClassNameArray = imgClassNames.split(" ");
		var imgClassName;
		for (var index in imgClassNameArray) {
			imgClassName = imgClassNameArray[index];
			// 图片宽度
			if (/^(img-width-\d+px)/i.test(imgClassName)) {
				imgWidth = imgClassName.substring(10,imgClassName.length-2);
				
			// 图片高度
			} else if (/^(img-height-\d+px)/i.test(imgClassName)) {
				imgHeight = imgClassName.substring(11,imgClassName.length-2);
				
			// 图片显示比例
			} else if (/^(img-proportion-\d+%)/i.test(imgClassName)) {
				imgProportion = imgClassName.substring(15,imgClassName.length);
			}
		}
	}
	// 显示宽度
	if (imgWidth != null && imgWidth != "") {
		img.width = imgWidth;
	}
	// 显示高度
	if (imgHeight != null && imgHeight != "") {
		img.height = imgHeight;
	}
	// 显示比例设置
	if (imgProportion != null && imgProportion != "") {
		img.width  = img.width * parseFloat(imgProportion)/100;
		img.height  = img.height * parseFloat(imgProportion)/100;
	}
	// 保持图片纵横比的情况下，取得能够在$(window)中放得下的大小
	var heightWidthPropor = img.height/img.width;
	var width = $(window).width()*0.8 >= img.width ? img.width:$(window).width()*0.8;
	var height;
	if ($(window).height()*0.8 < width*heightWidthPropor) {
		height = $(window).height()*0.8;
		width = height/heightWidthPropor;
	} else {
		height = width*heightWidthPropor;
	}
	
	// 防止因用户拖动边框而导致dialog宽高固定不变
	$("#dialog").parent().css("width","auto");
	$("#dialog").parent().css("height","auto");
	
	$("#img_id").css("height",height + "px");
	$("#img_id").css("max-height",height + "px");
	if (imgWidth != null && imgWidth != "") {
		$("#img_id").css("width",width + "px");
		$("#img_id").css("max-width",width + "px");
	}
	
	$("#dialog").css("width",width + "px");
	$("#dialog").css("height",height + 5 + "px");
	
	$("#img_id").css("overflow","hidden");
	$("#img_id").attr('src',img.src); 
	$("#dialog").window('center');
	// 解决关闭按钮位置问题
	$("div.panel-header.panel-header-noborder.window-header").css("width","auto");
 	$("#dialog").dialog("open");
}

3.调用方法，传入img对象：

<!-- onclick里这么写也行：showImg($('#testImg')) -->
<img id="testImg" src="${staticPath}/images/123456.png" class="img-proportion-400%" οnclick="showImg(this)">

图片class选项说明：

• 【img-width-**px】：图片指定宽度（如宽度指定200px：img-width-200px），仅支持整数。
  
• 【img-height-**px】：图片指定高度（如高度指定200px：img-height-200px），仅支持整数。
  
• 【img-proportion-**%】：图片指定放大百分比（如放大2倍：img-proportion-200%），仅支持整数，不可与【img-width-**px】或【img-height-**px】同时使用。