前端-Layui图片放大查看-显示原始图片尺寸

 

1.放大方法

    //点击图片放大查看
       function previewImg(obj) {
           var img = new Image();
           img.src = obj.src;
           var height = img.height; //获取图片高度
           var width = img.width; //获取图片宽度
           if (height > 1000 || width > 800) {
               height = height / 1.5;
               width = width / 1.5;
           }
           var imgHtml = "<img src='" + obj.src + "' style='width: " + width + "px;height:" + height + "px'/>";
           //弹出层
           layer.open({
               type: 1,
               offset: 'auto',
               area: [width + 'px', height + 'px'],
               shadeClose: true,//点击外围关闭弹窗
               scrollbar: true,//不现实滚动条
               title: false, //不显示标题
               content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
               cancel: function () {
                   
               }
           });
       }

2.如果出现宽高获取为0 的情况需要在图片加载完成后执行

    var img = new Image();
    img.src="http://www.baidu.com/img/baidu_sylogo1.gif";
    img.onload = function(){
        alert(this.width);
        alert(this.height);
        this.onload=null;
    }

 

posted @ 2023-03-23 17:02  不再_单纯  阅读(663)  评论(0)    收藏  举报