javascript - 获取图像宽度高度javascript

Question

好吧，我有这个代码：

    (function() {

    var img = document.getElementById('my_image');

    // Original
    var width, height;

    // Display
    var d_width = img.width;
    var d_height = img.height;

    var updateDetail = function() {
        document
            .getElementById('display_size')
            .innerHTML = 'Display Size: ' + d_width + ' x ' + d_height;

        document
            .getElementById('native_size')
            .innerHTML = 'Original Size: ' + width + ' x ' + height;
    };

    // Using naturalWidth/Height
    if (img.naturalWidth) {
        width = img.naturalWidth;
        height = img.naturalHeight;

        updateDetail();
    } else {
        // Using an Image Object
        img = new Image();
        img.onload = function() {
            width = this.width;
            height = this.height;

            updateDetail();
        };
        img.src = 'http://lorempixel.com/output/nature-q-c-640-480-3.jpg';
    }

}());

那是我的网站：

http://dhems.x10.mx/

但在我的网站上无法显示图像的宽度和高度

为什么？！？！

score 5 · Accepted Answer

把你的代码放进去

window.onload = function() {
 //insert code here
}

您的 js 文件在引擎到达图片之前执行。您收到以下控制台错误：

Uncaught TypeError: Cannot read property 'width' of null

将所有脚本文件放在页面末尾并将所有 css 文件放在开头也是一个好习惯。它会增加页面的加载时间，因为如果 JS 文件在开头，则在下载这些文件之前，您的浏览器不会开始渲染。

您的代码应如下所示：

window.onload = function() {

var img = document.getElementById('my_image');

// Original
var width, height;

// Display
var d_width = img.width;
var d_height = img.height;

var updateDetail = function() {
    document
        .getElementById('display_size')
        .innerHTML = 'Display Size: ' + d_width + ' x ' + d_height;

    document
        .getElementById('native_size')
        .innerHTML = 'Original Size: ' + width + ' x ' + height;
};

// Using naturalWidth/Height
if (img.naturalWidth) {
    width = img.naturalWidth;
    height = img.naturalHeight;

    updateDetail();
} else {
    // Using an Image Object
    img = new Image();
    img.onload = function() {
        width = this.width;
        height = this.height;

        updateDetail();
    };
    img.src = 'http://lorempixel.com/output/nature-q-c-640-480-3.jpg';
}

}

score 0 · Accepted Answer

0

将脚本标签移动到 HTML 中的图像之后。在图像进入页面之前执行脚本。

于 2013-06-22T22:27:49.560 回答

score 0 · Accepted Answer

将代码放在<body>a<script type='text/javascript'>或 use的底部window.onload。如果您有其他加载onload第一个选项是您的最佳选择，否则使用此代码：

<script type='text/javascript'>
  (function(){
    var pre = window.onload;
    onload = function(){
      if(pre)pre();
      //other code here
    }
  })();
</script>

此示例可用于您的<head>.

score 0 · Accepted Answer

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
function readImage(file) {

    var reader = new FileReader();
    var image  = new Image();

    reader.readAsDataURL(file);  
    reader.onload = function(_file) {
        image.src    = _file.target.result;              // url.createObjectURL(file);
        image.onload = function() {
            var w = this.width,
                h = this.height,
                t = file.type,                           // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~(file.size/1024) +'KB';
            $('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
        };
        image.onerror= function() {
            alert('Invalid file type: '+ file.type);
        };      
    };

}
$("#choose").change(function (e) {
    if(this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );
});
</script>
<meta charset=utf-8 />
<title>Multiple image upload with preview by Roko C.B.</title>
</head>
<body>
  <input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>

javascript - 获取图像宽度高度javascript

4 回答 4

Related

Reference