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

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

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;
    }

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

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

给我留言

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