javascript 获取图片原始尺寸
前端开发中，获取图片原始尺寸是一个常见且必要的操作，而JavaScript正是我们经常使用的代码语言。在众多的JavaScript操作中，如何获取图片的原始尺寸呢？下面就来一起探讨一下。
获取图片原始尺寸的方法是使用一个Image对象，然后获取这个对象的width和height属性值。下面是一个简单的示例代码：
var img = new Image();
img.onload = function() {
console.log('图片宽度：' + img.width);
console.log('图片高度：' + img.height);
}
img.src = 'example.png';在这段代码中，首先我们创建了一个Image对象。然后我们指定当图片加载完成后，执行onload事件里的代码，这里我们输出了图片的宽度和高度。最后，我们把图片的路径指定为‘example.png’。
此外，我们还可以使用自定义的一个函数，来获取图片的宽度和高度，代码如下：
function getImageSize(imgUrl, callback) {
var img = new Image();
img.onload = function() {
callback(img.width, img.height);
}
img.src = imgUrl;
}
getImageSize('example.png', function(width, height) {
console.log('图片宽度：' + width);
console.log('图片高度：' + height);
});这里，我们定义了一个函数getImageSize，它的第一个参数是图片的路径，第二个参数是回调函数。在函数内部，我们创建了一个Image对象，在图片加载完成后执行回调函数，把图片的宽度和高度返回。最后我们调用getImageSize函数，指定图片路径和回调函数，并输出宽度和高度。
除了直接使用Image对象获取图片的宽度和高度外，我们还可以实实现一些有意思的操作。比如，获取一个含有多个图片的容器的所有图片的宽度和高度之和。代码如下：
function getImagesSize(imgContainer, callback) {
var images = imgContainer.getElementsByTagName('img');
var width = 0, height = 0;
var count = images.length;
Array.prototype.forEach.call(images, function(img) {
var tempImg = new Image();
tempImg.onload = function() {
width += tempImg.width;
height += tempImg.height;
if (--count == 0) {
callback(width, height);
}
}
tempImg.src = img.src;
});
}
getImagesSize(document.getElementById('imgContainer'), function(width, height) {
console.log('容器中所有图片的宽度：' + width);
console.log('容器中所有图片的高度：' + height);
});在这段代码中，我们定义了一个getImagesSize函数，它的第一个参数是一个DOM元素，它的子元素包含了多个img标签。在函数内部，我们首先获得容器中所有的img标签，然后循环这些标签，分别创建一个Image对象，等所有图片都加载完成后，累加所有图片的宽度和高度，并执行回调函数。
总之，在前端开发中，获取图片原始尺寸是非常常见而且必要的，上述三个示例中足以满足大多数操作的需求。