您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2019年07月11日 15:31 最近更新于 2019年07月12日 19:15

原创 JS获取图片的真实宽高

2793 次浏览 读完需要≈ 3 分钟 JavaScript

内容目录

在JS中,想要获取一个图片的真实宽高不能直接通过image.widthimage.height属性,因为这两个属性获取到的可能是<img>标签的attribute

<!-- image.width 和 image.height 获取到的可能是标签的attribute -->
<img width="100" height="100" src="path" />

使用HTML5新增的属性naturalWidthnaturalHeight

好消息是,在HTML5中Image对象新增了naturalWidthnaturalHeight属性,可以直接获取图片的真实宽高。

function getImageRealSize(img){
	return { width: img.naturalWidth, height: img.naturalHeight };
}

不过这种方式只能在支持HTML5的浏览器中使用。尤其是对于IE来说,就必须是 IE9+

兼容所有浏览器的解决方案

如果你想兼容IE8及以下版本,你可以使用如下代码。

/**
 * 获取图片的真实宽高
 * @param {Image} img 
 * @param {function} callback 为了兼容旧浏览器,只能采用回调的方式得到真实的 width 和 height
 */
function getImageRealSize(img, callback) {
	if (img.naturalWidth) { // 如果支持HTML5属性,直接使用
		callback(img.naturalWidth, img.naturalHeight);
	} else {
		// 新建一个图片副本,来获取原始宽高
		var copy = new Image();
		copy.onload = function () {
			callback(copy.width, copy.height);
		};
		copy.src = img.src;
	}
}
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论