『壹』 灝嗕竴寮犲皬鍥劇墖浠3*3騫抽摵鍦ㄧ綉欏典笂js錛
瑕佸皢涓寮犲皬鍥劇墖浠 3*3 騫抽摵鍦ㄧ綉欏典笂錛屽彲浠ヤ嬌鐢 javaScript 鍜 CSS 鏉ュ疄鐜般傚叿浣撴ラゅ備笅:
鑾峰彇鍥劇墖瀵硅薄錛氫嬌鐢 JavaScript 鑾峰彇鍥劇墖瀵硅薄錛屼緥濡備嬌鐢 HTML5 瀛樺偍鍔熻兘灝嗗浘鐗囦笂浼犲埌鏈嶅姟鍣錛屾垨鑰呬粠鏈嶅姟鍣ㄤ笅杞藉浘鐗囧苟鑾峰彇鍏跺硅薄銆
鍒涘緩涓涓鏂扮殑鍥劇墖瀵硅薄錛氫嬌鐢 CSS 涓鐨 background-image 灞炴у皢鍥劇墖瀵硅薄璁劇疆涓鴻儗鏅鍥劇墖錛屽悓鏃跺皢 background-size 灞炴ц劇疆涓 cover錛屼互浣胯儗鏅鍥劇墖浠 3*3 鐨勬瘮渚嬪鉤閾恆
灝嗘柊鍥劇墖瀵硅薄娣誨姞鍒扮綉欏典笂錛氫嬌鐢 JavaScript 灝嗘柊鍥劇墖瀵硅薄娣誨姞鍒扮綉欏典笂錛屼緥濡備嬌鐢 DOM 鍏冪礌鐨 insertAdjacentHTML 鏂規硶銆
浠ヤ笅鏄涓涓紺轟緥浠ｇ爜:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>騫抽摵鍥劇墖</title>
<style>
body {
background-color: #ccc;
}
.container {
width: 100%;
height: 100%;
background-image: url("small-image.jpg");
background-size: cover;
background-position: center center;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<img src="small-image.jpg" alt="騫抽摵鍥劇墖">
</div>
<script>
const container = document.querySelector(".container");
const img = container.querySelector("img");
img.src = "small-image.jpg";
container.addEventListener("click", () => {
img.src = "";
});
</script>
</body>
</html>
鍦ㄨ繖涓紺轟緥浠ｇ爜涓錛宻mall-image.jpg 鏄浣犺佸鉤閾虹殑鍥劇墖鏂囦歡鐨勫悕縐般傚湪 CSS 涓錛屾垜浠浣跨敤 background-image 灞炴у皢鍥劇墖璁劇疆涓鴻儗鏅鍥劇墖錛屽悓鏃跺皢 background-size 灞炴ц劇疆涓 cover錛屼互浣胯儗鏅鍥劇墖浠 3*3 鐨勬瘮渚嬪鉤閾恆傚湪 JavaScript 涓錛屾垜浠浣跨敤 querySelector 鏂規硶鑾峰彇瀹瑰櫒鍏冪礌鍜屽浘鐗囧厓緔狅紝騫跺皢瀹冧滑娣誨姞鍒扮綉欏典笂銆傛渶鍚庯紝褰撶敤鎴峰崟鍑誨瑰櫒鍏冪礌鏃訛紝鎴戜滑灝嗗浘鐗囨枃浠剁殑 src 灞炴ч噸緗涓虹┖鍊礆紝浠ヤ嬌鍥劇墖鍋滄㈠鉤閾哄苟鎮㈠嶅師濮嬬姸鎬併
『貳』 圖片按比例縮放js
<script language="JavaScript">
<!--
//圖片按比例縮放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//參數(圖片,允許的寬度,允許的高度)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>
調用的時候
<img onload="javascript:DrawImage(this,100,100)" src="" />
這個是把圖片固定在寬和高各是100px,在這區間進行縮放。
『叄』 js壓縮圖片 到固定像素以內，500k為例
本文旨在探究js壓縮圖片的兩種方式： 改變圖片長寬 ， 改變圖片質量 ，和結合了以上兩者的 最終方案 。
首先，閱讀本文需要知道canvas的兩個方法
這兩個方法具體的說明可以在MDN上查看，關於圖片壓縮，也有很多現成的博客可以直接用。但是那些博客都有個問題，並沒有關心之後圖片的壓縮質量。
我試著用一個現成的例子去跑了一下，一個1.7M的圖片壓縮到了23k，堪稱像素級毀滅性破壞。
假如一張大圖可能包含著很多文字等關鍵信息，必須上傳之後使用方能清晰辨認。所以要壓縮之後質量盡可能接近500k的。500k像素以內，就是若一張圖寬度為1024，則高度不能超過500。因為圖片有其他的信息，也是要佔大小的。即不得大於 1024*500 。
所以激答，根據需求，上傳圖片不能超過500k的情況下盡可能保留圖片的清晰度。當然如果可以的情況下用上面提到的 canvas.toDataURL 設置壓縮程度為0.9，0.8試試看，圖片質量可以接受，大小會有大幅度的縮小。
如果不壓縮，靠調整圖片長寬去控制上傳大小呢？
原理很簡單，就是靠不斷地縮小限定的最大寬高，直到最終長寬的積小於規定的大小。
這種方法有可能最後得出的圖片的大小會略大於規定大小，原因上文也提到過了，如果想使用這種方法，可自行再調整一下。
上面的方法有個問題，就是改變了圖片的原始長寬。如果一個圖的長寬足夠大，壓縮圖片質量，糊一點但是內容看得清也是ok的嘛。所以，跟上面同理，我們可以不斷調整圖片的質量設定直到大小合適，那麼，如何在圖片上傳之前知道圖片的大小呢？
首先，需要知道的一點是，壓縮之後拿到的base64字元串會轉成blob對象，然後傳給服務端。
可以查閱文檔，blob對象有個屬性是size
這個size就是上傳之後實際的文件大小。
參照上面的思路，可以每次改變 canvas.toDataURL('image/' + fileType, level); level的值，去調整壓縮圖片質量，然後用blob對象的size去驗證是否滿足500k以內的需求。
關於 canvas.toDataURL 的level到底是怎麼計算的，MDN文檔里也沒說，寫了個循環一次減少0.1的level壓縮了幾個圖片
用加減乘除算了一下，沒找到規律，數學不好放棄了（這個東西好像也不是能觀察出來的，看結果跟初始大小沒啥關系）。
這里要注意的是，有可能遇到超大圖片悶早，0.1的level可能不足以壓縮到500k，所以小於0.1的時候，改變level遞減的差值繼續壓縮下去
在開始接收到圖片的時候給一個loading增加用戶的耐心好了，loading萬歲~
其實單純的壓縮質量遇到稍大的圖片，會導致頁面高頻計算，然後頁面基本就用不了了- -。有嘗試過用iphone的一個屏幕截圖（10M左右），壓的時候稍過一會，整個手機都在發燙，只能殺進程。
所以，若對長度沒有特殊的限制，可以做一個縮放，去加快壓縮的進度螞鉛雀，提高能壓縮的圖片大小上限。
頁面到了ios上還是不行- -，可以看到最後圖片level為0.001，最長邊為764。
問題還是循環次數還是過多，計算頻率太高。從圖中可看出，對於大圖來說，初始設定的level和圖片尺寸過於寬松，可以優化一下初始level和尺寸。
有的時候還會遇到一張圖片無論如何也壓不到500k，就是上一次和這次的壓縮後大小沒有變化，這種情況需要拋錯，不讓循環繼續。
大圖片的等待時間稍長，可以給用戶先預覽一個base64的圖片增加等待耐心，方法名為 getImgBase64 ,這里都一並給出了
解決的隱患：上面這個方案會出現我需要一個500k的照片，壓到了520k之後，再壓了一次。有時候這最後的一次會特別誇張，直接將圖片弄到了幾十k。
參考了： https://github.com/WangYuLue/image-conversion
這個庫裡面有個方法 compressAccurately ,這個方法可以比較精準地壓縮。偷偷翻了一下源碼。
其實上一個方案的痛點就在於，如何在每一個壓縮循環里處理尺寸和壓縮比例。
總結
如有紕漏，歡迎指正
『肆』 js或css怎麼圖片隨屏幕解析度等比例縮放
<html>
<head>
<style>
html,body{width:100%;height:100%;margin:auto0px;padding:auto0px;text-align:center;}
.imgBox,.imgBoximg{width:100%;height:100%;}
</style>
</head>
<body>
<divclass="imgBox">
<imgsrc="1.jpg"/>
</div>
</body>
</html>
如上代碼可以實現，把圖片版換一下就權OK了，希望可以幫到你。
『伍』 js實現網頁 高度和寬度成比例的代碼
網頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高：document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
網頁被捲去的高：document.body.scrollTop
網頁被捲去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
屏幕解析度的高：window.screen.height
屏幕解析度的寬：window.screen.width
屏幕可用工作區高度：window.screen.availHeight
屏幕可用工作區寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕解析度的高： window.screen.height
屏幕解析度的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術要點
本節代碼主要使用了Document對象關於窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對於不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在
IE下需要 深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。
Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。
實現代碼
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>請調整瀏覽器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器窗口的實際尺寸-->
瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"><br>
瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函數：獲取尺寸
{
//獲取窗口寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//獲取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通過深入Document內部對body進行檢測，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//調用函數，獲取數值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
源程序解讀
（1）程序首先建立一個表單，包含兩個文本框，用於顯示窗口當前的寬度和高度，並且，其數值會隨窗口大小的改變而變化。
（2）在隨後的JavaScript代碼中，首先定義了兩個變數winWidth和winHeight，用於保存窗口的高度值和寬度值。
（3）然後，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，並將二者保存在前述兩個變數中。
（4）再通過深入Document內部對body進行檢測，獲取窗口大小，並存儲在前述兩個變數中。
（5）在函數的最後，通過按名稱訪問表單元素，結果輸出至兩個文本框。
（6）在JavaScript代碼的最後，通過調用findDimensions ( )函數，完成整個操作。
『陸』 緗戠粶緙栬緫鍦╝sp.net涓濡備綍鑷鍔ㄨ皟鏁翠笂浼犲浘鐗囩殑鍍忕巼澶у皬(瀹介珮)
鑷鍔ㄨ皟鏁翠笂浼犲浘鐗囧ぇ灝 鍙浠ユ湁涓ょ嶆柟娉曪細
1鏄涓婁紶鏃跺欏悓鏃剁敓鎴愬浘鐗囩緝鐣ュ浘錛
2鏄鍦ㄦ樉紺哄浘鐗囨椂鍊欙紝絳夋瘮渚嬪帇緙 鍥劇墖澶у皬 榪欎釜鐢╦s鍙浠ュ疄鐜幫紱
鐢熸垚緙╃暐鍥句唬鐮(C#)錛
/// <summary>
/// 鐢熸垚緙╃暐鍥
/// </summary>
/// <param name="originalImagePath">婧愬浘璺寰勶紙鐗╃悊璺寰勶級</param>
/// <param name="thumbnailPath">緙╃暐鍥捐礬寰勶紙鐗╃悊璺寰勶級</param>
/// <param name="width">緙╃暐鍥懼藉害</param>
/// <param name="height">緙╃暐鍥鵑珮搴</param>
/// <param name="mode">鐢熸垚緙╃暐鍥劇殑鏂瑰紡</param>
public static void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height, string mode)
{
System.Drawing.Image originalImage = System.Drawing.Image.FromFile(originalImagePath);
int towidth = width;
int toheight = height;
int x = 0;
int y = 0;
int ow = originalImage.Width;
int oh = originalImage.Height;
switch (mode)
{
case "HW"://鎸囧畾楂樺界緝鏀撅紙鍙鑳藉彉褰錛
break;
case "W"://鎸囧畾瀹斤紝楂樻寜姣斾緥
toheight = originalImage.Height * width / originalImage.Width;
break;
case "H"://鎸囧畾楂橈紝瀹芥寜姣斾緥
towidth = originalImage.Width * height / originalImage.Height;
break;
case "Cut"://鎸囧畾楂樺借佸噺錛堜笉鍙樺艦錛
if ((double)originalImage.Width / (double)originalImage.Height > (double)towidth / (double)toheight)
{
oh = originalImage.Height;
ow = originalImage.Height * towidth / toheight;
y = 0;
x = (originalImage.Width - ow) / 2;
}
else
{
ow = originalImage.Width;
oh = originalImage.Width * height / towidth;
x = 0;
y = (originalImage.Height - oh) / 2;
}
break;
default:
break;
}
//鏂板緩涓涓猙mp鍥劇墖
System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);
//鏂板緩涓涓鐢繪澘
Graphics g = System.Drawing.Graphics.FromImage(bitmap);
//璁劇疆楂樿川閲忔彃鍊兼硶
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
//璁劇疆楂樿川閲,浣庨熷害鍛堢幇騫蟲粦紼嬪害
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//娓呯┖鐢誨竷騫朵互閫忔槑鑳屾櫙鑹插～鍏
g.Clear(Color.Transparent);
//鍦ㄦ寚瀹氫綅緗騫朵笖鎸夋寚瀹氬ぇ灝忕粯鍒跺師鍥劇墖鐨勬寚瀹氶儴鍒
g.DrawImage(originalImage, new Rectangle(0, 0, towidth, toheight),
new Rectangle(x, y, ow, oh),
GraphicsUnit.Pixel);
try
{
//浠jpg鏍煎紡淇濆瓨緙╃暐鍥
bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Jpeg);
}
catch (System.Exception e)
{
throw e;
}
finally
{
originalImage.Dispose();
bitmap.Dispose();
g.Dispose();
}
}
絳夋瘮渚嬪帇緙╃殑js浠ｇ爜濡備笅:
function DrawImage(ImgD,iwidth,iheight){
//鍙傛暟(鍥劇墖,鍏佽哥殑瀹藉害,鍏佽哥殑楂樺害)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
鐢ㄦ硶錛
<img id="img1" src='鍥劇墖鍦板潃' alt='' onload="javascript:DrawImage(this,130,150)" />
『柒』 如何利用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>