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

Question

我正在尝试根据最大宽度/最大高度数组调整图像的大小。 到目前为止，这是我想出的：

<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 ，因为图像的高度>宽度，使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 个解决方案

解决方案1
1 2011-10-07 04:07:57

解决方案2
0 已采纳 2011-10-07 03:51:33

解决方案3
0 2011-10-07 04:51:53

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

问题描述

3 个解决方案

解决方案1 1 2011-10-07 04:07:57

解决方案2 0 已采纳 2011-10-07 03:51:33

解决方案3 0 2011-10-07 04:51:53

解决方案1
1 2011-10-07 04:07:57

解决方案2
0 已采纳 2011-10-07 03:51:33

解决方案3
0 2011-10-07 04:51:53