使图像适合在javascript中正确显示

奥温

我需要按照自然尺寸调整图像大小以适合屏幕,就像Chrome浏览器中打开的图像一样,为此我编写了一个rescale()函数(如下)。

它通常可以正常工作,但适用于大型横向图像(例如,在使用我的函数http://imageontime.com/upload/big/2013/07/20/51ea60b522bba.jpg调整大小后,宽度和高度均超过屏幕)仍然超出屏幕几行的高度(很少是宽度),所以我想问一下是否有更好的缩放javascript函数,或者这里是否有任何铬源专家可以研究铬源代码来调整图像大小从它的功能,所以我可以将其移植到javascript吗?

这是代码:

function setautow() {
    img.style.width = 'auto';
    img.style.removeProperty("height");
    if (document.documentElement.clientHeight == 0) // Firefox again...
    {
        img.height = window.innerHeight;
    }
    else {
        img.height = document.documentElement.clientHeight;
    }
}

function setautoh() {
    img.style.height = 'auto';
    img.style.removeProperty("width");
    if (document.documentElement.clientWidth == 0) // FF
    {
        img.width = window.innerWidth;
    }
    else {
        img.width = document.documentElement.clientWidth;
    }
}

function shrink(a) {
    if (a) {
        if (img.width != document.documentElement.clientWidth) {
            setautoh();
        }
    }
    else {
        if (img.height != document.documentElement.clientHeight) {
            setautow();
        }
    }
}

var rescaled = false;

function rescale() {
    if (rescaled) {
        rescaled = false;
        img.height = img.naturalHeight;
        img.width = img.naturalWidth;
        img.style.removeProperty("height");
        img.style.removeProperty("width");
    }
    else {
        rescaled = true;
        if (img.naturalWidth > img.naturalHeight) {
            setautoh();
            setTimeout(function () {
                shrink(true);
            }, 0);
        }
        else {
            setautow();
            setTimeout(function () {
                shrink(false);
            }, 0);
        }
    }
}
奥温

终于满足了我的需求,非常适合FireFox + Chrome

编辑:很好,非常适合大于屏幕的图像,可以在上面处理,以便可以在较小的图像上使用

function fit_to_screen()
{
    img.removeAttribute("style");
    var winX = window.innerWidth + "px";
    var winY = window.innerHeight + "px";
    var vbar = false;
    if (document.body.scrollHeight > document.body.clientHeight) // vertical scrollbar
    {
            img.style.height = winY;
            vbar = true;
    }
    if (document.body.scrollWidth > document.body.clientWidth) // horizontal scrollbar
    {
            if (vbar) // both scrollbars
            {
                    if ((document.body.scrollHeight - document.body.clientHeight) > (document.body.scrollWidth - document.body.clientWidth)) // let's see which one is bigger
                    {
                            img.removeAttribute("style");
                            img.style.height = winY;
                    }
                    else
                    {
                            img.removeAttribute("style");
                            img.style.width = winX;
                    }
            }
            else
            {
                    img.removeAttribute("style");
                    img.style.width = winX;
            }
    }
}

// bonus, switch between original size and fullscreen
var rescaled = false;

function rescale()
{
    if (rescaled)
    {
            rescaled = false;
            img.removeAttribute("style");
    }
    else
    {
            rescaled = true;
            fit_to_screen();
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在vue中正确显示图像

下拉图像未在ExpandableListView中正确显示

无法在 Tkinter Treeview 中正确显示图像

无法在javascript中正确加载图像

如何在 JavaScript 中正确显示 div

如何使引导轮播幻灯片图像适合在 html 和 css 中显示?

ToggleButton中的图像无法在WPF中正确显示

如何在固定尺寸的div中正确显示大图像?

图像高度未在 HTML 电子邮件中正确显示

如何在 flexbox 滑块中正确显示乘法图像?

在wxpython中正确显示numpy数组cv2图像

我如何在ASP.NET中正确显示图像

html中的图像无法在页面中正确显示

如何在颤动中正确地将图像适合圆形按钮?

在php中正确显示♥

网格图像在Firefox(开发版)中正确显示,但在Chrome或Safari中无法正确显示

在Listview中正确加载图像

在 Scala 中正确显示 Cowsay

如何在 Django 框架中正确显示图像到 html 模板?

如何在 ruby on rails 中正确显示数据库中的图像

如何解决在.SVG图像中放错位置但在.PNG中正确显示的文本?

jssor滑块图像无法在chrome浏览器中正确显示

PyQt:QWidget 幻灯片图像未在 QMainWindow 中正确显示

如何从用户选择的文件夹中正确设置图像的Uri以便在ImageView中显示?

在Firefox中使用javascript时html数据属性未按预期显示,但在chrome中正确显示

在JavaScript中正确迭代对象

在 JavaScript 对象中正确使用“this”

使用FadeInImage Flutter正确适合图像

如何在LibGDX中正确旋转图像?