(1)在aspx页面加入img标签:
<div style="overflow: hidden">
<asp:Image ID="imgkey" CssClass="imgwidth" runat="server" />
</div>
(2)js版按比例缩放
<script type="text/javascript">
function AutoSize(Img, end) {
var image = new Image();
image.src = Img.src;
var maxWidth = $(Img).parent().width();
if (maxWidth == 0)
maxWidth = 200;
var maxHeight = maxWidth;
// 当图片比图片框小时不做任何改变
if (image.width < maxWidth && image.height < maxHeight) {
Img.width = image.width;
Img.height = image.height;
} else //原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放,反之以框的高为标准缩放
{
if (maxWidth / maxHeight <= image.width / image.height) { //原图片宽高比例 大于 图片框宽高比例
Img.width = maxWidth;
Img.height = maxWidth * (image.height / image.width);
} else {
Img.width = maxHeight * (image.width / image.height);
Img.height = maxHeight;
}
}
$(Img).show();
if (!end) {
window.setTimeout(function () {
AutoSize(Img, true);
}, 200)
}
}
</script>
(3)css版按比例缩放
<style type="text/css">
#imgkey {
max-width:100%!important;
max-height:100%!important;
width:expression(this.width>150?"150":this.width)!important;
height:expression(this.height>60?"60":this.height)!important;
}
</style>
(4)后台代码:
//此处省略该数据库表的类的对象的代码
string img_key= model.T_IMAGE_KEY; //将表中图片的加密路径赋值给该字段
if (string.IsNullOrEmpty(img_key)) //若为空则不显示图片
{
this.imgkey.Visible = false;
}
else
{
this.imgkey.Attributes.Add("onload", "javascript:AutoSize(this)");
this.imgkey.ImageUrl = "/Pages/showImage.aspx?key=" + img_key;
}
(4)图片处理的后台代码
string img_key = Request["key"]; //此处的key为控件页面中传过来的路径
if (!string.IsNullOrEmpty(img_key))
{
string exname = "";
byte[] imgs = Phoebe.PFile.FileService.GetFile(img_key, out exname); //转换为二进制流
Response.BinaryWrite(imgs);//将图片输出在页面
}