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

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

javascript image

调整JavaScript大小后获取图像大小,javascript,image,resize,Javascript,Image,Resize,我正在尝试根据最大宽度/最大高度数组调整图像大小。以下是我到目前为止的想法： <html> <head> <title>Image resize test</title> <script> function createImage(){ //The max-width/max-height var maxDim = [500,500];

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

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


图像大小测试
函数createImage（）{
//最大宽度/最大高度
var maxDim=[500500]；
//创建图像
var img=document.createElement（“img”）；
setAttribute（“src”http://nyrixcorp.com/images/eggplant_service.png");
文件.正文.附件（img）；
//用于调整图像大小的函数
函数resize（）{
//调整图像大小
var纵向=this.width


您应该能够按原样运行此文件。它能够在加载图像后获得宽度/高度。但是一旦你改变了宽度，它仍然会记录原来的高度。唯一能正常工作的浏览器似乎是Firefox（较新版本）。在窗口加载完成之前，所有其他浏览器都不会更新“高度”属性
有人知道这个问题的解决方法吗？图像已加载，但未提供正确的大小调整尺寸。
您尚未更改高度，因为图像的高度>宽度，请使纵向=假
当你改变宽度时，在IE8中，它只会调整宽度，但在chrome中，它会同时改变宽度和高度，我认为这取决于浏览器
您可以通过手动更改高度和来解决此问题。
您可以尝试设置image.style.maxWidth/image.style.maxHeight，而不是设置宽度/高度，然后图像将在保留纵横比的情况下调整大小。
即无法识别AddEventListener，您必须根据浏览器自行处理。。可能的解决办法
<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>


图像大小测试
函数createImage（）{
//最大宽度/最大高度
var maxDim=[500500]；
//创建图像
var img=document.createElement（“img”）；
setAttribute（“src”http://nyrixcorp.com/images/eggplant_service.png");
文件.正文.附件（img）；
//用于调整图像大小的函数
函数resize（）{
//调整图像大小
var纵向=this.width

只要你根据你使用的浏览器将true
或false
传递到isIE
，它就可以正常工作了
在chrome 14.0.835.187mI上工作正常我使用chrome 13，并且在第一次加载页面时就可以正常工作。然而，当你刷新时，它给出了错误的高度。@Azmisov在FF和chrome的情况下，它是如何将高度更改为160的？在你的代码中没有看到为此编写的任何内容……我原以为取消高度属性会使图像按比例调整大小。您知道在IE7+中设置“最大宽度/最大高度”样式是否会按比例调整图像大小吗？很抱歉，我的机器上目前没有安装IE。@Azmisov我在IE8上测试，使用css样式的最大宽度，它根本不工作，即使我用width:auto；最大宽度：10px好的，这似乎是唯一的跨浏览器可能性。你知道这在IE7、Safari 4、Chrome 12、FF 3.6和Opera 10.6中是否有效吗？对于IE7，最大宽度/最大高度css样式不起作用。对于其他浏览器来说应该没问题。如果IE<8支持很重要，那么我建议计算比率并相应地更新宽度和高度。更好的方法是：If（img.addEventListener）{…}else If（img.attachEvent）{…}else{img.onload=…}