在 Javascript 中确定图像文件大小和尺寸
在 Web 应用程序中,直接从以下位置确定图像的文件大小(以 kb 为单位)和分辨率浏览器上下文对于各种目的至关重要,例如在页面上显示此信息。本文探讨了在不依赖 ActiveX 控件或 Java 小程序的情况下实现此跨浏览器功能的解决方案。
检索图像尺寸
获取图像元素的像素大小在浏览器中,不包括边框和边距,可以使用 clientWidth 和 clientHeight属性:
var img = document.getElementById('imageId'); var width = img.clientWidth; var height = img.clientHeight;
确定文件大小
不幸的是,浏览器 API 缺乏对访问图像文件大小的直接支持。不过,解决方法是使用 Ajax 发出 HEAD HTTP 请求:
var xhr = new XMLHttpRequest(); xhr.open('HEAD', 'img/test.jpg', true); xhr.onreadystatechange = function(){ if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length')); } else { alert('ERROR'); } } }; xhr.send(null);
注意:此方法受同源策略约束,仅允许同一域内的请求。
额外注意事项
var img = document.createElement('img'); img.onload = function () { alert(img.width + ' x ' + img.height); }; img.src='http://sstatic.net/so/img/logo.png';
以上是如何在 JavaScript 中获取图像文件大小和尺寸?的详细内容。更多信息请关注PHP中文网其他相关文章!