客户端和服务器图片的缩放和居中显示

最新推荐文章于 2024-09-19 10:23:45 发布

zhang_kevin_wei

最新推荐文章于 2024-09-19 10:23:45 发布

阅读量1.3k

点赞数

分类专栏： js & css 文章标签：服务器 image function url filter file

本文链接：https://blog.csdn.net/zhang_kevin_wei/article/details/7026836

版权

js & css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

缩放图片的原理就是通过展示区域和原图比较，得到缩放率

1. 服务器端的图片显示非常简单，直接给img的src赋值即可然后控制img控件的style

var ctrlMaxWidth = 350,ctrlMaxHeight = 300;//展示区域大小
function DrawServerImageSize(DrawImage){
   var imgCtrl = new Image();
   imgCtrl.src = DrawImage.src;//借imgCtrl得到原图的长和宽
   //获取图片缩放的比例，取最小值
   var ratio = Math.min( 1, Math.max( 0, ctrlMaxWidth ) / imgCtrl.width  || 1, Math.max( 0, ctrlMaxHeight ) / imgCtrl.height || 1);
   DrawImage.style.width = Math.round( imgCtrl.width * ratio ) + "px";
   DrawImage.style.height = Math.round( imgCtrl.height * ratio ) + "px";
}

2. 客户端的图片显示IE中通过滤镜显示，给img设置filter属性

使用滤镜显示浏览客户端图片：

var url = 'file:///' + Ext.get('imageUpload').dom.value;//获取客户端图片的位置
if (img_reg.test(url)) {
    var image = Ext.get('imageBrowse').dom;
    if (Ext.isIE) {
       image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片
        image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + url + "\")";
    } else {
       image.src = getFullPath(Ext.get('imageUpload').dom);
    }
    try{
       DrawClientImageSize(image);
       DrawImagePosition(image);
    }
    catch(err){
    };
}

function DrawClientImageSize(DrawImage){
   var picWidth = DrawImage.offsetWidth;
   var picHeight = DrawImage.offsetHeight;
   //获取图片缩放的比例，取最小值
   var ratio = Math.min( 1, Math.max( 0, ctrlMaxWidth ) / picWidth || 1, Math.max( 0, ctrlMaxHeight ) / picHeight || 1);
   if(Ext.isIE){
      DrawImage.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
   }
   DrawImage.style.width = Math.round( picWidth * ratio ) + "px";
   DrawImage.style.height = Math.round( picHeight * ratio ) + "px";
 }

3.使图片居中显示

function DrawImagePosition(DrawImage){
    DrawImage.style.position = "relative";
    DrawImage.style.top =  (ctrlMaxHeight - DrawImage.offsetHeight)/2 + "px";
    DrawImage.style.left =  (ctrlMaxWidth - DrawImage.offsetWidth)/2 + "px";
}