生成html頁面的C＃程序 - 限制圖像尺寸

我有一個C＃程序，它基於我存儲在文件系統上的各種數據和圖像位，生成大量html頁面。 html本身工作得很好，但圖像的尺寸差別很大。我需要一種方法來確保給定的圖像不會超過頁面上的特定大小。生成html頁面的C＃程序 - 限制圖像尺寸

完成此操作的最簡單方法是通過html本身...如果有某種「maxwidth」或「maxheight」屬性可以在html中設置，或者可能是強制圖像適合的方法在一個表格單元格內（如果我使用了類似的東西，我必須確保非侵犯性維度可以自動縮放）。問題是，我對HTML中這種「微調」的東西瞭解不多，對Google來說這似乎是一件困難的事情（大多數解決方案都涉及某種html專業化;我只是使用純html）。

或者，我可以在運行時通過檢查C＃中的圖像，然後在html中設置寬度/高度值（如果圖像的尺寸超過某個值）來確定每個圖像的寬度和高度。這裏的問題是，將整個圖像加載到內存中看起來效率非常低，只是爲了獲得它的尺寸。我需要一種「窺視」圖像的方式，並獲得它的大小（可以是bmp，jpg，gif或png）。

任何方法的任何建議將不勝感激。

來源

2010-04-01 Professor Mustard

<img>標籤有一個width and height property。如果您只指定一個，瀏覽器將在該維度中調整大小並保持寬高比。

來源

2010-04-01 22:05:20

我對他的要求（和一些假設）的理解意味着這可能會使一些小圖像變大。他並沒有說所有圖像都太大，這意味着可能會有一些小圖像，這可能會產生一些不良影響。 – Jaxidian 2010-04-01 22:13:17

@Jaxdian我錯過了那個。 – 2010-04-01 22:22:17

是的，這正是問題所在。我也需要保留每張圖片的寬高比。 – 2010-04-04 14:58:29

CSS具有max-width和max-height屬性。他們受到所有流行瀏覽器的最新版本的支持。

來源

2010-04-01 22:06:15

不幸的是，這會丟失圖像的寬高比。 – Jaxidian 2010-04-01 22:12:19

根據你所說的話（以及一些假設，比如你將多次使用一張圖片），似乎在圖像中緩存圖片的尺寸是提高效率的一個方法。這樣做，那麼你可以智能地設置HTML或CSS的尺寸。

請參閱this question瞭解如何獲取分辨率的說明（如果您還不知道這一點 - 不幸的是，我知道無法在不加載整個圖像的情況下執行此操作）。我鼓勵你把這個圖像變量放在一個非常小的範圍內，並儘快進行處理。

我會勸阻你無意中使用CSS的max-width和max-height屬性，因爲你會失去縱橫比。

來源

2010-04-01 22:12:00 Jaxidian

感謝您的反饋！如果僅僅爲我的一次構建過程增加大約10秒，我可能只是「咬緊牙關」並讀入整個位圖來獲取尺寸。我希望能夠掃描圖片的頭部信息，但是每種文件類型都會有所不同，我真的不知道我是否想花費那麼多時間來研究/編碼愛好項目的一個方面！ :) – 2010-04-04 15:10:47

我最終做的是讀取整個位圖，但將每個圖像的尺寸，文件大小和日期「緩存」到單獨的文件中。在後續運行中，我可以重新使用這些緩存的維度，除非圖像的文件大小或日期修改值已更改。 – 2010-04-08 11:20:04

如果您擔心處理圖像大小重新計算的程序，可以選擇將負擔減輕到瀏覽器。你可以使用JavaScript。該腳本將「調整」一個圖像，使其最大高度/寬度爲200像素客戶端。

<script type="text/javascript" language="javascript"> 
    function img_resizer(img) { 
     width = 0; 
     height = 0; 
     if (img.offsetWidth) { 
      resizeImage(img.offsetWidth, img.offsetHeight)    
     } 
     else { 
      resizeImage(img.style.pixedWidth, img.style.pixelHeight); 
     } 
    } 

    function resizeImage(width, height) { 
     if (width > 200 || height > 200) { 
      if (width > height) { 
       height = (height/width) * 200; 
       width = 200; 
      } 
      else { 
       width = (width/height) * 200; 
       height = 200; 
      } 

      img.style.width = width + 'px'; 
      img.style.height = height + 'px'; 
     } 
    } 
</script>

<img src="screen.jpg" onload="img_resizer(this)" />

我知道，在IE和Firefox的作品，你可能需要做如Safari，Opera和Chrome瀏覽器，一些測試。但我不知道，你可能只是想咬下去，讓程序照顧它。

來源

2010-04-02 01:04:11

感謝您的代碼示例;如果我可以在Html中處理它，這可能是一條路！ – 2010-04-04 15:00:32

有沒有會計副本和貼紙的數量呃！我也想知道這一點，我看到的所有縮放寬度或高度都是無窮無盡的例子。誰會希望其他的溢出？！對於寬度，所以無論圖像

調整大小的寬度和高度，而不需要爲一個循環
不超過圖像原始尺寸
用途可以正常工作，即寬度/方面的高度的數學和高度*方面實際上按比例適當上下：/

//////////////

private void ResizeImage(Image img, double maxWidth, double maxHeight) 
{ 
    double srcWidth = img.Source.Width; 
    double srcHeight = img.Source.Height; 

    double resizeWidth = srcWidth; 
    double resizeHeight = srcHeight; 

    double aspect = resizeWidth/resizeHeight; 

    if (resizeWidth > maxWidth) 
    { 
     resizeWidth = maxWidth; 
     resizeHeight = resizeWidth/aspect; 
    } 
    if (resizeHeight > maxHeight) 
    { 
     aspect = resizeWidth/resizeHeight; 
     resizeHeight = maxHeight; 
     resizeWidth = resizeHeight * aspect; 
    } 

    img.Width = resizeWidth; 
    img.Height = resizeHeight; 
}

來源

2011-04-13 20:08:08

如果您只設置了以下屬性中的一個：width或height（不是兩者都不可用或不可用）<img>元素，圖像將保持縱橫比，而您未設置的其他值將自動調整。

來源

2012-04-17 13:27:38 formatc

生成html頁面的C＃程序 - 限制圖像尺寸

回答

相關問題