layui图片自适应大小预览 – NA博客

layui图片自适应大小预览

最近使用layui做了一个系统,用到了图片预览的功能,功能需求是根据图片大小自适应缩放展示,通俗的来讲就是图片展示框大小恒定,图片根据展示框大小自动缩小或放大。

实现思路:只需要先计算window的宽高,然后获取图片的宽高,然后按比例计算图片的显示宽高即可。

实现代码(JS):

function previewImg(config) {

            if (!config.src || config.src == "") {
                layer.msg("没有发现图片!");
                return;
            }
            var default_config = { title: "抓拍图片预览丨" + config.equipmentName + "丨抓拍编号:" + config.capturedTime };
            var img = new Image();
            img.onload = function () {//避免图片还未加载完成无法获取到图片的大小。
                //避免图片太大,导致弹出展示超出了网页显示访问,所以图片大于浏览器时下窗口可视区域时,进行等比例缩小。
                var max_height = $(window).height() - 100;
                var max_width = $(window).width();
                //rate1,rate2,rate3 三个比例中取最小的。
                var rate1 = max_height / img.height;
                var rate2 = max_width / img.width;
                var rate3 = 1;
                var rate = Math.min(rate1, rate2, rate3);
                //等比例缩放
                default_config.height = img.height * rate; //获取图片高度
                default_config.width = img.width * rate; //获取图片宽度

                $.extend(default_config, config);
                var imgHtml = "<img src='" + default_config.src + "' width='" + default_config.width + "px' height='" + default_config.height + "px'/>";
                //弹出层
                layer.open({
                    type: 1,
                    shade: 0.8,
                    offset: 'auto',
                    area: [default_config.width + 'px', default_config.height + 50 + 'px'],
                    shadeClose: true,
                    scrollbar: false,
                    title: default_config.title, //不显示标题
                    content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
                    cancel: function () {
                        //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
                    }
                });
            }
            img.src = config.src;
        }

调用方法:

         var o = new Object();
         o.src = "http://abc.com/123456.jpg";
         o.capturedTime = data.SerialNumber;
         o.equipmentName = data.EquipmentName;
         previewImg(o)

实现效果:

清风

心中有梦想就要一如既往,不能遇到困难说放就放,千锤百炼才能磨炼出好钢,饱经风霜才能更强。

相关推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注



微信扫一扫,分享到朋友圈

layui图片自适应大小预览
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close