欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

new Image 读取宽高为0

程序员文章站 2022-05-04 23:41:13
...

获取图片一张图片的大小

let img = new Image()
img.src = imgUrl

if ( img.width != 375 || img.height != 200 ) {
	message.error(‘请上传375*200大小的图片’)
	return false
}

发现有时img的宽高读取都为0,但是图片url地址是正确的。
这边存在一个问题, 当给img赋值src 的时候,其实是去请求了这个url获取图片资源,但是在执行img.width != 375 || img.height != 200 这行代码的时候,有可能图片资源尚未请求到,所以自然读取的数值为0.
解决的方法是在确保图片已经被加载后,再执行对应的方法

img.onload = () => {
      if ( img.width != 375 || img.height != 200 ) {
	      message.error(‘请上传375*200大小的图片’)
	      return false
      }
}

附 :

// 创建一个HTMLImageElement实例 等价于document.createElement('img')
		var img = new Image()
		var img1 = new Image(100, 100) 
		img.src = './1.png'
		img1.src = './1.png'
		img.onload = () =>{
			console.log(img.width, img.height) //210 92
			console.log(img1.width, img1.height) //100 100
		}
		
		document.body.appendChild(img1)
		// 插入 <img width="100" height="100" src="./1.png">
		
// css
/* 权重高于内联的width 和height */
/*只设置宽高中的一项, 另一项会等比例的缩放,保持宽高比不变*/

     img{
			width: 100px;
			height: 200px;
		}

// html

   <div class="img-box">
		<img src="./1.png" id="img"/>
	</div>

// js
    var imgEle = document.getElementById('img')
    console.log(imgEle.width, imgEle.height)  //100 200 读取的是实际被修改后的宽高值

相关标签: image width js