1. 首頁
  2. 問答
  3. 如何在保持寬高比的同時在網頁上顯示調整大小的圖像？

如何在保持寬高比的同時在網頁上顯示調整大小的圖像？

2009-06-10 30 views
5

什麼是使用JavaScript在客戶端調整圖像大小的最佳方法？如何在保持寬高比的同時在網頁上顯示調整大小的圖像？

編輯：對不起，我的意思是顯示調整在客戶端的圖像，我不知道你的意思實際上是調整圖像大小，或只是設置的大小最好方式..

來源

2009-06-10 mattt

+1

當用戶想要從客戶端上傳圖片時，您是否想要一種方法來最大限度地減少網絡流量，在將圖片發送到服務器之前，首先調整圖片的大小以縮小圖片大小？ – 2009-06-10 03:59:24

+0

@傑弗裏：是的，完全正確。否則，只需調整服務器端的大小，然後再發送它。 – 2009-06-10 04:16:48

+0

@mattt：許多人在上傳圖片前提供了調整圖片大小的解決方案。那是你在找什麼？ （問題的當前文本有點不清楚，編輯會有幫助）。 「永遠應該送達」的 – 2012-08-31 21:48:41

回答

7

簡單。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Client-Side Image Resize (Why?!)</title> 
    <script type="text/javascript"> 
     window.onload = function() { 
     var url = "http://www.google.com/intl/en_ALL/images/logo.gif"; 
     var img = new Image(); 
     img.onload = function() { 
      var w = parseInt((this.width + "").replace(/px/i, ""), 10); 
      var h = parseInt((this.height + "").replace(/px/i, ""), 10); 

      // 50% scale 
      w = (w/2) + "px"; 
      h = (h/2) + "px"; 

      var htmlImg = document.createElement("img"); 
      htmlImg.setAttribute("src", url); 
      htmlImg.setAttribute("width", w); 
      htmlImg.style.width = w; 
      htmlImg.setAttribute("height", h); 
      htmlImg.style.height = h; 
      document.body.appendChild(htmlImg); 
     } 
     img.src = url; 
     } 
    </script> 
    </head> 
    <body> 
    <h1>Look, I'm Resized!</h1> 
    </body> 
</html>

來源

2009-06-10 05:39:52

0

如果你想要做它在一份聲明中則高度和寬度屬性將最有可能是最好的。

如果您想要動畫，可以使用.animate(...)命令並將高度和寬度設置爲參數。這應該使圖像變化平穩過渡。

來源

2009-06-10 03:52:32 Hugoware

-2

應始終以圖片大小顯示圖片。最好在服務器上有多個副本，而不是通過網絡複製一個文件並嘗試在客戶端進行操作。試想一下：

  • 網絡資源的浪費轉移500X400圖像當你真正需要100X80
  • CPU類似的浪費在一些成像API縮小/放大在客戶端

，圖像尺寸的圖像不是高度/寬度的簡單變化。當你指定一個不同於（通過樣式，腳本等）原始圖像大小的大小時，瀏覽器將使用本地API（例如win32繪圖）來適當縮小/放大圖像。裁剪圖像（丟失部分圖像）比較容易，但很少需要。

來源

2009-06-10 04:31:28 Sesh

3

如果你不通過閃得放一放，與FLASH10現在你將它們發送到服務器之前，必須對客戶端處理上傳的文件的選擇。因此，您可以使用隱藏/透明/小型Flash對象來允許客戶端上傳圖像，使用Flash調整圖像大小（它具有一些良好的圖像處理API），然後將字節數據發送到服務器。

如果您想在上載前將圖像編碼爲任一格式，則as3核心庫有一個jpeg和png編碼器。

如果您沒有閃光燈，你可以隨時下載Flex 3的（或4），SDK和使用Flashdevelop中上傳將是一個非常強大的工具之前，做這一切免費=）

來源

2009-06-10 06:06:21 justlost

3

調整大小。這將減少將圖像上傳到服務器所需的時間。我們的用戶通常擁有5百萬像素的圖像，並且他們不知道如何使用圖像編輯器來縮小圖像尺寸。我們要上傳的是1500像素寬的照片，JPG或PNG壓縮到小於500K字節。

這件衣服Thin File聲稱能夠做到這一點，但我還沒有檢查出來。我只是希望找到一種方法來使用JQuery來做同樣的事情。

來源

2009-10-05 20:36:27

相關問題

 相關問題