javascript图片大小图片尺寸代码

最新推荐文章于 2024-11-17 22:34:43 发布

原创最新推荐文章于 2024-11-17 22:34:43 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

javascript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种使用JavaScript来获取图片原始尺寸的方法。通过创建隐藏的Image对象并利用其加载完成后的宽度和高度属性，可以在用户点击图片时弹窗显示图片的原始宽度和高度。此外，还提供了一个文件上传预览的功能，并验证了所选图片是否符合特定尺寸要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<title>JS实现单击图片获取图片的原始尺寸代码 - www.webdm.cn</title>
<img src="http://www.webdm.cn/themes/pic/webdm_logo.gif"  onclick=alert('图片原始宽度为：'+GetImageWidth(this)+'\n图片原始高度为:'+GetImageHeight(this))>
<script>
var OriginImage=new Image();
function GetImageWidth(oImage)
{
  if(OriginImage.src!=oImage.src)OriginImage.src=oImage.src;
  return OriginImage.width;
}
function GetImageHeight(oImage)
{
  if(OriginImage.src!=oImage.src)OriginImage.src=oImage.src;
  return OriginImage.height;
}
function setImage(value){
	var img=document.getElementById("myimage");
	img.src=value;
	 
	 

}
function check(){
	var img=document.getElementById("myimage");
 
	if(img.src==""){
		alert("请您选择图片！");
		return ;
	}
	var flag=false;
 	var width		=GetImageWidth(img) ;
	var height		=GetImageHeight(img);
	 
	if(width<225 || height < 50) flag=false;
	
	if(flag==false){
		alert(width);
		alert(height);
		alert("图片不合适");	
		return ;
	} 
	else {
		alert("可以提交");
		//document.getElementById("myform").submit();
	
	}

}
</script>
<img  style="display:none;"   id="myimage"  />
<form action="#" method="post" id="myform">
	<input type="file" name="myfile" onchange="setImage(this.value)" /><br/>
	<input type="button" value="上传文件" onclick="check()" />
</form>