導航:首頁 > 圖片大全 > 圖片大小如何設置在js中
圖片大小如何設置在js中
發布時間：2023-05-27 11:37:57A. js 控制圖片大小
這種情況用CSS來控制最合適。例如你想讓初始圖片顯示為100px*100px，則：
<img src="images/pic.png" width="100" height="100" />
或者：
<img src="images/pic.png" style="width:100px; height:100px" />
當頁面中圖片非常多，且要求每張圖片的大小依據其父容器來固定怎麼辦？可以使用max-weight：
img {max-weight:100%;}
這樣圖片會自動縮放到和其父容器等寬。
B. 怎麼在js 裡面限制上傳圖片的大小不能超過 1M
這樣設置的：
1、先用form標簽創建一個上傳的表單。
<formid="form1"name="form1"method="post"action=""enctype="multipart/form-data">早高
<p><inputtype="hidden"name="MAX_FILE_SIZE"value="100000"/></p>
<p><inputname="userfile"id="userfile"type="file"onchange="check()"/></p>
</form>
2、用Javascript設置格式和大小。
<scriptlanguage="JavaScript"type="text/javascript">functioncheck()遲睜祥{varaa=document.getElementById("userfile").value.toLowerCase().split('.');//以「.」分隔上傳文件字元串//varaa=document.form1.userfile.value.toLowerCase().split('.');//以「.」分隔上傳文件字元串if(document.form1.userfile.value==""){alert('圖片不能為空！');returnfalse;}else{if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'碼搏||aa[aa.length-1]=='bmp'
||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判斷圖片格式{varimagSize=document.getElementById("userfile").files[0].size;alert("圖片大小："+imagSize+"B")if(imagSize<1024*1024*1)alert("圖片大小在1M以內，為："+imagSize/(1024*1024)+"M");returntrue;}else{alert('請選擇格式為*.jpg、*.gif、*.bmp、*.png、*.jpeg的圖片');//returnfalse;}}}</script>圖片超過1M則不能上傳 如圖：
C. 如何利用JS或者CSS樣式來自動調整圖片大小
js版和css版自動按比例調整圖片大小方法，分別如下：
<title>javascript圖片大小處理函數</title>
<scriptlanguage=Javascript>敬或局
varproMaxHeight=150;
varproMaxWidth=110;
functionproDownImage(ImgD){
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
varrate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1){
ImgD.width=image.width*rate;
ImgD.height=image.height*rate;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
</head>
<body>
<imgsrc="999.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
<imgsrc="room.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
</body>
純css的防止圖片撐破頁面的代碼，圖片會自動按比例縮小：
<styletype="text/css">
.content-width{MARGIN:auto;WIDTH:600px;}
.content-widthimg{MAX-WIDTH:100%!important;HEIGHT:auto!important;width:expression(this.width>600團稿?"600px":this.width)!important;}
</style>
<div亮讓class="content-width">
<p><imgsrc="/down/js/images/12567247980.jpg"/></p>
<p><imgsrc="/down/js/images/12567247981.jpg"/></p>
</div>
D. 如何用JS改變圖像的原始大小
用JS改變圖像的原始大小方法：
var canvas = document.getElementById("canvas"蠢謹);
var context = canvas.getContext("2d");
$('input[type=file]').change(function(){
var file=this.files[0];
var reader=new FileReader();
var image=new Image();
reader.readAsDataURL(file);
reader.onload=function(){
// 通過 reader.result 來訪問生成的 DataURL
var url=reader.result;
image.src=url;
alert(image.width);
alert(image.height);
image.height /=4;
image.width /=4;
canvas.setAttribute("width"派拍, image.width+"px"帶羨基);
canvas.setAttribute("height", image.height+"px");
alert(image.naturalWidth);
alert(image.naturalHeight);
context.drawImage(image,0,0,image.width,image.height);
};
});
E. 如何利用JS或者CSS樣式來自動調整圖片大小
js版和css版自動按比例調整圖片大小方法，分別如下：
<title>javascript圖片大小處理函數</title>
<scriptlanguage=Javascript>
varproMaxHeight=150;
varproMaxWidth=110;
functionproDownImage(ImgD){
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
varrate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1){
ImgD.width=image.width*rate;
ImgD.height=image.height*rate;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
</head>
<body>
<imgsrc="999.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
<imgsrc="room.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
</body>
純css的防止圖片撐破頁面的代碼，圖片會自動按比例縮小：
<styletype="text/css">
.content-width{MARGIN:auto;WIDTH:600px;}
.content-widthimg{MAX-WIDTH:100%!important;HEIGHT:auto!important;width:expression(this.width>600?"600px":this.width)!important;}
</style>
<divclass="content-width">
<p><imgsrc="/down/js/images/12567247980.jpg"/></p>
<p><imgsrc="/down/js/images/12567247981.jpg"/></p>
</div>
F. JS控制圖片放大和縮小怎麼改
用js控制圖片額大小。主要是修改圖片的寬度和高度。下面是簡單的代碼實現：
HTML 代碼：
<imgsrc='../1.jgp'id='img'/>
這個時候img的圖片自身是多大，就會顯示多大。100px*100px的圖。
js代碼：
varoImg=document.getElementById('img');
oImg.width='50px';//當給img標簽的寬度設置為50px後，高度會自動按比例縮小。
oImg.width='200px'//當給img標簽的寬度設置為200px後，高度會自動按比例擴大。
與圖片大小如何設置在js中相關的資料
- 如何將圖片變成小網格
- 中小學生畫畫圖片大全
- 相冊圖片如何放置桌面
- 如何在圖片文檔上打分
- 木製掛衣架圖片大全集
- 飯店窗簾款式圖片大全
- 如何尋找同畫風的圖片
- 如何發動感圖片
- 世界鳥類大全圖片
- excel圖片如何批量導出文件
- 鋼構廠房圖片大全
- 如何檢索生葯圖片
- 圖片如何生成形狀圖案
- ps如何放大或縮小圖片
- 特種兵照片圖片大全
- 未來在哪裡圖片大全
- 剪映如何調節每秒播放圖片時間
- 微信合並轉發的圖片如何批量保存
- 手工狐狸頭飾圖片大全
- 天天p圖橡皮擦如何把圖片擦掉
- 桂花樹樹葉圖片大全
- cdr如何在原有的圖片添加圖片
- 男士褲衩圖片大全
- 手機如何編輯放大圖片中的細節
- 部隊頭發標准圖片大全
- 如何用os把圖片上的字加粗
- 圖片如何裝特效
- 黑色殺手圖片大全
- 淘寶圖片如何壓縮高清
- 列印復印圖片如何調白
- 書桌寫字台圖片大全
- 多功能嬰兒床圖片大全
- 安全的手抄報圖片大全
- 手機掃描王中的圖片如何微信發送
- 如何在幕布思維導圖上添加圖片
- 如何修改一個圖片里的線條
- 百度圖片如何清晰下載
- 跳舞的丸子頭圖片大全
- ps摳出來的圖片如何調整顏色
- 圖片微信朋友圈如何顯示
- word圖片如何復制到另一個文檔
- 如何找律師控告跨境電商圖片侵權