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

全屏阅读
  • 基本信息
  • 作者：
  • 作者已发布：956篇文章
  • 发布时间：2023年11月16日 10:34:24
  • 所属分类：javascript, WEB前端
  • 阅读次数：287次阅读
  • 标签：

1.放大方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//点击图片放大查看
       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 的情况需要在图片加载完成后执行

1
2
3
4
5
6
7
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;
    }

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明：本文由mpxq168发布，所有内容仅代表个人观点。版权归恒富网和mpxq168共有，欢迎转载， 但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。

目前有 0 条留言 其中：访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言！