Get image size after resize JavaScript

2019-09-08 06:28发布

站内问答 / JavaScript
918 3 5

I am trying to resize an image based off of a max-width/max-height array. Here's what I've come up with so far:

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

You should be able to run this file as-is. It is able to get the width/height after loading the image. But once you alter the width, it still logs the old height. The only browser that works correctly appears to be Firefox (newer versions). All the other browsers don't update the height attribute until the window is finished loading.

Does anyone know a fix for this? The image is already loaded, but it isn't giving the correct resized dimensions.

3条回答
傲
2楼-- · 2019-09-08 06:50

Instead of setting width/height you can try to set image.style.maxWidth/image.style.maxHeight then image will resize with preserving aspect ratio.

查看更多
0人赞 添加讨论(0) 举报
We Are One
3楼-- · 2019-09-08 06:54

You didn't change the height yet, because your image's height > width, make portrait = false;

When you change the width, in IE8, it will only resize the width, but in chrome it will both change the width and height, I think this is browser depended.

You can fix this by both change the height and with manually.

查看更多
0人赞 添加讨论(0) 举报
The star\"
4楼-- · 2019-09-08 07:09

IE doesnt recognize addEvenetListener and you must handle it your self based on brower.. possible solution

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

it will work fine just u need to pass true or false to isIE based on the browser you are using

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)