快捷導(dǎo)航

javascript實(shí)現(xiàn)獲取圖片大小及圖片等比縮放的方法

更新時(shí)間：2016年11月24日 14:15:01 作者：Blue Sky ......

這篇文章主要介紹了javascript實(shí)現(xiàn)獲取圖片大小及圖片等比縮放的方法,涉及javascript針對圖形圖像相關(guān)屬性獲取與修改相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)獲取圖片大小及圖片等比縮放的方法。分享給大家供大家參考，具體如下：

獲取圖片大?。?/p>

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(ImgD, FitWidth, FitHeight) {
  var image = new Image();
  image.src = ImgD.src;
  if (image.width > 0 && image.height > 0) {
    if (image.width / image.height >= FitWidth / FitHeight) {
      if (image.width > FitWidth) {
        ImgD.width = FitWidth;
        ImgD.height = (image.height * FitWidth) / image.width;
      } else {
        ImgD.width = image.width;
        ImgD.height = image.height;
      }
    } else {
      if (image.height > FitHeight) {
        ImgD.height = FitHeight;
        ImgD.width = (image.width * FitHeight) / image.height;
      } else {
        ImgD.width = image.width;
        ImgD.height = image.height;
      }
    }
  }
}

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

基于JavaScript獲取鼠標(biāo)位置的各種方法
這篇文章主要介紹了基于JavaScript獲取鼠標(biāo)位置的各種方法 ,需要的朋友可以參考下
2015-12-12
QTreeWidget中MainWindow窗體中布局器不起作用詳解
本文主要介紹了QTreeWidget中MainWindow窗體中布局器不起作用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
判斷客戶端瀏覽器是否安裝了Flash插件的多種方法
各種方法判斷客戶端瀏覽器是否安裝了Flash插件，對于必須要支持flash才能瀏覽的頁面來說，提前做下說明，用戶體驗(yàn)會更好。
2010-08-08
JGrid中拖動改變列寬的腳本原型
JGrid 中，可以拖動改變列寬，簡單的原理就是改變相應(yīng)的 col 的 style.width 今天看到skybot 同學(xué)在問這個問題，就又把這個功能拿出來，單獨(dú)實(shí)現(xiàn)了一下（有改進(jìn)）
2008-07-07
Bootstrap實(shí)現(xiàn)前端登錄頁面帶驗(yàn)證碼功能完整示例
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)前端登錄頁面帶驗(yàn)證碼功能,結(jié)合完整實(shí)例形式分析了Bootstrap前端登錄頁面帶驗(yàn)證碼界面布局與功能實(shí)現(xiàn)相關(guān)操作技巧,需要的朋友可以參考下
2020-03-03
Bootstrap基本組件學(xué)習(xí)筆記之進(jìn)度條(15)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之進(jìn)度條,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
淺談js里面的InttoStr和StrtoInt
下面小編就為大家?guī)硪黄獪\談js里面的InttoStr和StrtoInt。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
ElementUI的Dialog彈窗實(shí)現(xiàn)拖拽移動功能示例代碼
這篇文章主要介紹了ElementUI的Dialog彈窗實(shí)現(xiàn)拖拽移動功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
JavaScript中文件流的處理場景及方法
作為一名前端開發(fā),我們平時(shí)也少不了對文件流數(shù)據(jù)進(jìn)行處理,今天簡單整理一下日常開發(fā)中比較常見的一些處理文件流的場景及處理方法,希望可以幫助到大家
2023-09-09
switch語句的妙用(必看篇)
下面小編就為大家?guī)硪黄猻witch語句的妙用(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10