图片上传时获取图片的宽和高

Posted 心欲无痕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片上传时获取图片的宽和高相关的知识,希望对你有一定的参考价值。

  经常会遇到图片上传的问题,这时候我们会传图片的地址,宽和高到服务器,至于图片上传就不说了,这里主要说图片上传时获取图片的原始宽和高的问题。

  一般而言,我们把图片上传至服务器时,服务器会返回一个上传地址给我们,这个就是我们图片的url了,但是光有这个还是不够的,因为还要将图片的宽和高传给服务器,这时候就可以这样做了。直接上代码:  

var img = new Image()
img.src = url

  然后就可以使用img.width和img.height来获取图片的宽和高了。当然仅仅这样做是不够的,因为图片上传是异步的,并不能直接使用该方法获取图片的宽和高,这样获取到的都是0.

  必须将上传的图片放置body标签里面才能去使用load事件,可以使用appendChild将img标签插入body标签里面(document.getElementsByTagName(‘body‘)[0].appendChild(img)),这样做会有一个问题,每次上传图片后页面底部都会多一张图,可以使用 display将其隐藏,然后使用onload方法,等图片加载完。 

img.onload = function(){
  w = img.width;
  h = img.height        
}

  然后将要发的请求放在一个方法里面,在onload事件里面去调用方法,否则load方法外面是获取不到宽和高的。

 

  当然了,还有另外一种方法,就是使用ES6的办法。 

async function foo(){
 	let img = new Image()
 	img.src = ‘https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2546717774,3910079056&fm=200&gp=0.jpg‘
 	document.getElementsByTagName(‘body‘)[0].appendChild(img) // 图片插入body标签中,否则无法执行load事件
        img.style.display = ‘none‘  // 将图片隐藏
  	return {‘width‘:img.width,‘height‘:img.height}
 }
 foo().then((val) => {   // async函数内部return语句返回的值,会成为then方法回调函数的参数。所以此处的val就是上面return语句返回的值
 	console.log(val)  // {‘width‘:img.width,‘height‘:img.height}
 })

  

  

以上是关于图片上传时获取图片的宽和高的主要内容,如果未能解决你的问题,请参考以下文章

requests获取图片的宽和高

C语言中怎样获得jpg图片的宽和高?

上传图片时等比缩放的一个小小算法

在html文档中用img的宽和高属性来缩放图像有啥坏处?

大侠,可以告诉我怎么用C语言以2进制读取png图片的宽和高吗?谢了!!!

RN 图片处理 resizeMode