获取图像宽度高度javascript
Posted
技术标签:
【中文标题】获取图像宽度高度javascript【英文标题】：Get image width height javascript 【发布时间】：2013-06-19 19:16:51 【问题描述】：好吧，我有这个代码：
http://jsfiddle.net/hv9gB/3/
(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/
但在我的网站上无法显示图像的宽度和高度
为什么？！？！
【问题讨论】：
【参考方案1】：把你的代码放进去
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';
【讨论】：
是的，只要把你的代码放在 window.onload = function () code here 不客气。顺便说一句，考虑将最佳答案标记为已回答，这样其他人就不会无缘无故进入这里了。【参考方案2】：将脚本标签移动到 HTML 中的图像之后。在图像进入页面之前执行脚本。
【讨论】：
你看剧本了吗？window.onload = function()
var img = document.getElementById('my_image'); 不在加载中【参考方案3】：
将代码放在<body> 底部的<script type='text/javascript'> 中或使用window.onload。如果您有其他东西正在加载onload，第一个选项是您的最佳选择，否则使用此代码：
<script type='text/javascript'>
(function()
var pre = window.onload;
onload = function()
if(pre)pre();
//other code here
)();
</script>
这个例子可以用在你的<head>。
【讨论】：
感谢您的回答！但我想学习 .js 文件上的代码：D【参考方案4】：<!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 获取图像大小（高度和宽度）？