HTML5获取图片原图尺寸 |
您所在的位置：网站首页 › 网页获取图片长和宽 › HTML5获取图片原图尺寸 |
HTML5获取图片原图尺寸
|
获取图片显示尺寸
在js中可以通过width和height来获取显示的宽高。 在jQuery中可以通过width()方法和height()方法来获取显示的宽高。 Document window.onload = function () { // js获取图片显示尺寸 var img = document.getElementById('csdnImg'); var imgWidth = img.width; var imgHeight = img.height; console.log('js', imgWidth, imgHeight); // 120 45 }; $(function () { var img = $('#csdnImg'); var imgWidth = img.width(); var imgHeight = img.height(); console.log('jQuery', imgWidth, imgHeight); // 120 45 });
注： 如果不是在onload函数里执行代码，不确定图片是否加载完成时，可以使用 img.complete 来判断图片是否加载完成。 获取图片原图尺寸现在我们有需求，获取图片真实的尺寸，一般而言，有两种方式可以做到。 我们仅使用js做演示。 使用 new Image() 方法 Document window.onload = function () { // 通过 new Image 获取图片真实尺寸 var csdnImg = document.getElementById('csdnImg'); var img = new Image(); var naturalWidth, naturalHeight; img.onload = function () { naturalWidth = this.width; naturalHeight = this.height; console.log('new Image()', naturalWidth, naturalHeight); // 240 90 }; img.src = csdnImg.src; };
注意： new Image() 新生成的图片并不会添加到文档当中，如果有需要，可以手动添加。img.src 一般要放到 img.onload 之后。如果图片并没有显示到文档中，一般可以使用该方法获取原图尺寸。 使用 naturalWidth 属性 Document window.onload = function () { // 通过natural属性获取图片真实尺寸 var csdnImg = document.getElementById('csdnImg'); var naWith, naHeight; naWith = csdnImg.naturalWidth; naHeight = csdnImg.naturalHeight; console.log('naturalAttr', naWith, naHeight); // 240 90 };
注意： 这是HTML5新增的属性，有兼容性问题，使用前需要判断。 |
【本文地址】