JS控制生成缩略图

最新推荐文章于 2024-06-11 17:10:29 发布

天空是蓝的

最新推荐文章于 2024-06-11 17:10:29 发布

阅读量808

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/tianchengwei09/article/details/50523642

本文介绍了一种在网页上即时显示上传图片缩略图的方法，通过JavaScript实现图片大小调整，确保图片在不同设备上都能良好展示。

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

<html> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv=content-type> 
<meta name=author content="Laruence(www.laruence.com)"> 
<title>即时显示上传缩略图</title> 
</head> 
<body style="text-align:center;"> 
<div> 
<img src="D:\20140606193440.jpg" onload="DrawImage(this,250,150);" > 
</div> 
<script language="javascript">
var flag=false;
function DrawImage(ImgD,w,h){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= w/h){
if(image.width>w){
ImgD.width=w;
ImgD.height=(image.height*w)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
//ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>h){
ImgD.height=h;
ImgD.width=(image.width*h)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
//ImgD.alt=image.width+"×"+image.height;
}
}
}
</script> 
</body> 
</html>