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

Question

使用JavaScript在客戶端調整圖像大小的最佳和最快方法是什么？

編輯：對不起，我的意思是在客戶端顯示調整大小的圖像的最佳方式..

Answer 1

簡單。

<!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>

Answer 2

在上傳之前調整大小將是一個非常強大的工具。 這將減少將圖像上載到服務器所花費的時間。 我們的用戶通常會從他們的相機中獲得5百萬像素的圖像，他們不知道如何使用圖像編輯器縮小尺寸。 我們想要上傳的是1500像素寬的照片，jpg或png壓縮到小於500K字節。

這個裝備Thin File聲稱能夠做到，但我還沒有檢查出來。 我非常希望找到一種方法來使用JQuery來做同樣的事情。

Answer 3

flash 10支持在客戶端調整圖像大小：

http://www.swfupload.org/

Answer 4

如果您沒有被閃存推遲，現在使用flash10可以選擇在客戶端處理上傳的文件，然后再將它們發送到服務器。 所以你可以使用一個隱藏/透明/小flash對象來允許客戶端上傳他們的圖像，讓flash調整圖像大小（它有一些很好的圖像處理apis），然后將字節數據發送到服務器。

如果你想在上傳之前將圖像編碼為任一格式，as3核心lib有一個jpeg和png編碼器。

如果您沒有閃存，您可以隨時下載flex 3（或4）sdk並使用flashdevelop完成所有操作=）

Answer 5

http://www.shift8creative.com/projects/agile-uploader/index.html上傳前調整大小。 靈活，緊湊的JavaScript集成，讓您使用任何后端語言，快速，高質量的圖像。

比顯示JavaScript集成的主頁更好的演示： http ： //www.shift8creative.com/projects/agile-uploader/advanced-demo.html

像啤酒一樣免費。 希望能幫助到你。

Answer 6

我不確定你的意思是實際調整圖像大小，還是只設置圖像顯示的大小。 一個是不可能的，另一個是使用jQuery設置width和height屬性。

http://docs.jquery.com/CSS/height

http://docs.jquery.com/CSS/width

Answer 7

如果你想在一個聲明中這樣做，那么高度和寬度屬性很可能是最好的。

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

Answer 8

應始終按照要顯示的尺寸提供圖像。 最好在服務器上安裝多個副本，而不是通過網絡復制一個文件並嘗試在客戶端進行操作。 考慮一下：

當你真正需要100X80時，浪費網絡資源來傳輸500X400圖像
在某些成像API中類似地浪費CPU以縮小/放大客戶端上的圖像

調整圖像大小不是高度/寬度的明顯變化。 當您指定不同於（通過樣式，腳本等）原始圖像大小的大小時，瀏覽器將使用本機API（例如win32 draw）來正確縮小/放大圖像。 裁剪圖像（丟失部分圖像）更容易，但很少需要。

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

問題描述

8 個解決方案

解決方案1
7 已采納 2009-06-10 05:39:52

解決方案2
3

解決方案3
3 2009-11-25 16:07:29

解決方案4
3 2009-06-10 06:06:21

解決方案5
2 2010-02-23 20:53:17

解決方案6
1 2009-06-10 03:48:38

解決方案7
0 2009-06-10 03:52:32

解決方案8
-2 2009-06-10 04:31:28

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

問題描述

8 個解決方案

解決方案1 7 已采納 2009-06-10 05:39:52

解決方案2 3

解決方案3 3 2009-11-25 16:07:29

解決方案4 3 2009-06-10 06:06:21

解決方案5 2 2010-02-23 20:53:17

解決方案6 1 2009-06-10 03:48:38

解決方案7 0 2009-06-10 03:52:32

解決方案8 -2 2009-06-10 04:31:28

解決方案1
7 已采納 2009-06-10 05:39:52

解決方案2
3

解決方案3
3 2009-11-25 16:07:29

解決方案4
3 2009-06-10 06:06:21

解決方案5
2 2010-02-23 20:53:17

解決方案6
1 2009-06-10 03:48:38

解決方案7
0 2009-06-10 03:52:32

解決方案8
-2 2009-06-10 04:31:28