Question

我正在尝试根据max-width / max-height数组调整图像大小。这是我到目前为止所提出的：

<html>
<head>
    <title>Image resize test</title>
    <script>
        function createImage(){
            //The max-width/max-height
            var maxDim = [500,500];
            //Create the image
            var img = document.createElement("img");
            img.setAttribute("src","http://nyrixcorp.com/images/eggplant_service.png");
            document.body.appendChild(img);
            //Function for resizing an image
            function resize(){
                //resize the image
                var portrait = this.width < this.height;
                this[portrait ? "height" : "width"] = maxDim[portrait ? 1 : 0];
                //What is the height? PROBLEM HERE!!!
                console.log(this.height);
            }
            //Is the image loaded already?
            var temp = new Image();
            temp.src = img.src;
            var loaded = typeof temp.complete != "undefined" ? temp.complete : !isNaN(temp.width+temp.height) && temp.width+temp.height != 0;
            //Fire the resize function
            if (loaded) resize.call(img);
            else img.addEventListener("load",resize,false);
        }
    </script>
</head>
<body onload="createImage()">
</body>
</html>

您应该可以按原样运行此文件。加载图像后，它可以获得宽度/高度。但是一旦你改变宽度，它仍然记录旧的高度。唯一正常工作的浏览器似乎是Firefox（较新版本）。在窗口加载完成之前，所有其他浏览器都不会更新height属性。

有人知道解决这个问题吗？图像已加载，但未提供正确的尺寸调整尺寸。

Answer 1

您可以尝试设置image.style.maxWidth / image.style.maxHeight而不是设置宽度/高度，然后使用保留的宽高比调整图像大小。

Answer 2

您尚未更改height，因为您的图片高度＆gt; width，make portrait = false;

当您更改宽度时，在IE8中，它只会调整宽度，但在chrome中它会改变宽度和高度，我认为这是浏览器所依赖的。

您可以通过更改高度和手动修复此问题。

Answer 3

IE无法识别addEvenetListener，你必须根据浏览器自己处理它...可能的解决方案

<html>
<head>
    <title>Image resize test</title>
    <script>
        function createImage(){
            //The max-width/max-height
            var maxDim = [500,500];
            //Create the image
            var img = document.createElement("img");
            img.setAttribute("src","http://nyrixcorp.com/images/eggplant_service.png");
            document.body.appendChild(img);
            //Function for resizing an image
            function resize(){
                //resize the image
                var portrait = this.width < this.height;
                this[portrait ? "height" : "width"] = maxDim[portrait ? 1 : 0];
                //What is the height? PROBLEM HERE!!!
                console.log(this.height);
            }
            //Is the image loaded already?
            var temp = new Image();
            temp.src = img.src;
            var loaded = typeof temp.complete != "undefined" ? temp.complete : !isNaN(temp.width+temp.height) && temp.width+temp.height != 0;
            //Fire the resize function
            if (loaded) resize.call(img);
            else{ 
            if(isIE == true) // check here for browser 
            img.onload = resize;
            else
            img.addEventListener("load",resize,false);}
        }
    </script>
</head>
<body onload="createImage()">
</body>
</html>

它会正常工作只需要根据您使用的浏览器将true或false传递给isIE

调整JavaScript大小后获取图像大小

3 个答案: