JavaScript圖片簡單等比例縮放
上傳圖片時候,可能圖片的尺寸是未知的,例如尺寸過大,可能會導致網頁變形或者錯誤。
美觀度就會受到極大影響,所以通常要進行等比例縮放。
程式碼例項如下:
[JavaScript] 純文字檢視 複製程式碼var resizeImg=function(img, maxWidth, maxHeight){ var w=img.width; var h=img.height; //當圖片比預覽區域小時不做任何改變 if(w < maxWidth && h < maxHeight) return; // 當實際圖片比例大於預覽區域寬高比例時 // 縮放圖片寬度,反之縮放圖片寬度 w/h>maxWidth/maxHeight?img.width=maxWidth:img.height=maxHeight; }
上面程式碼的計算方式是一個純數學問題,自行分析即可。
相關文章
- 圖片等比例縮放裁切詳解
- 移動端圖片等比例縮放實踐
- Vue3等比例縮放圖片元件Vue元件
- JavaScript DOM元素長寬等比例縮放JavaScript
- css實現圖片按寬等比例縮放不變形CSS
- CSS實現圖片等比例縮小不變形CSS
- SwiftUI圖片處理(縮放、拼圖)SwiftUI
- android imageview 縮放檢視圖片AndroidView
- 【Node】簡單快捷的圖片壓縮指令碼指令碼
- opencv 圖片幾何變換-縮放OpenCV
- Android 圖片處理之固定視框中的等比例壓縮Android
- 開源圖片工具箱(Img Toolbox) 格式轉換 新增水印 圖片壓縮 圖片裁剪 圖片旋轉 圖片縮放
- 23.Quick QML-簡單且好看的圖片瀏覽器-支援多個圖片瀏覽、縮放、旋轉、滑輪切換圖片UI瀏覽器
- 滑鼠懸浮圖片實現縮放效果
- css中圖片按照長寬比縮放CSS
- QLabel顯示圖片 ,並實現縮放
- 使用 JavaScript 壓縮和翻轉圖片JavaScript
- 自定義圖片裁剪之雙指縮放思路
- 《你不知道的 CSS》之等比例縮放的盒子CSS
- VS+Qt+Halcon——顯示圖片,實現滑鼠縮放、移動圖片QT
- css設定圖片固定寬高,按比例縮放CSS
- .NetCore實現圖片縮放與裁剪 - 基於ImageSharpNetCore
- JS—圖片壓縮上傳(單張)JS
- ugui 縮放圖片使圖片的四個角和四邊保持原樣UGUI
- 實現簡單的輪播圖(單張圖片、多張圖片)
- 圖片響應式縮放,已中心為原點裁剪
- 縮放圖片至固定大小,尺寸不足以0填充
- 攻防世界-簡單的圖片
- 踩坑!填坑!NodeJS環境使用GraphicIMagicK裁切、縮放圖片NodeJS
- BMP格式圖片縮放及在LCD螢幕展示練習
- HarmonyOS NEXT應用開發之圖片縮放效果實現
- 圖片縮放(不裁剪,按原來比例計算寬高)
- web前端頁面點選預覽圖片及大小縮放Web前端
- 前端圖片壓縮 - H5&Uni-App圖片壓縮前端H5APP
- 圖形影像處理之簡單圖片
- CNN-簡單圖片分類CNN
- ??圖片壓縮CanvasCanvas
- canvas 壓縮圖片Canvas