如何在网页上显示调整大小的图像并保持宽高比？

Question

如何在网页上显示调整大小的图像并保持宽高比？

javascriptjqueryimageimage-manipulation

5

什么是使用JavaScript在客户端调整图像大小的最佳和最快方法？

编辑：抱歉，我的意思是在客户端上调整大小后显示图像的最佳方法。

- mattt

1

你是否想要一种方法，在用户想要从客户端上传图像时，通过先将图像调整大小为较小的尺寸，以减少网络流量并将其发送到服务器？ - Jeffrey Kemp

@Jeffrey：是的，完全正确。否则就在发送之前在服务器端调整大小。 - Esteban Araya

@mattt：有很多人提供了在上传之前调整图像大小的解决方案。这是你想要的吗？（当前问题的文本有点不清楚，编辑会很有帮助）。 - Dan Dascalescu

8个回答

3

Flash 10支持在客户端调整图像大小：

http://www.swfupload.org/

- Andras

3

调整大小后再上传将是一个非常强大的工具。这将减少上传图像到服务器所需的时间。通常我们的用户拍摄的照片都有 500 万像素，他们不知道如何使用图像编辑器来缩小尺寸。我们想要上传的是一张宽度为 1500 像素的照片，jpg 或 png 格式，压缩后小于 500K 字节。

这个 Thin File 网站声称能够做到，但我还没有去验证过。我更希望找到一种使用 JQuery 来实现同样功能的方法。

- Bob Brunius

3

如果你不介意使用Flash，现在有了Flash10，你可以选择在将上传的文件发送到服务器之前在客户端处理它们。因此，您可以使用一个隐藏/透明/小的Flash对象来允许客户端上传其图像，让Flash调整图像大小（它具有一些良好的图像操作API），然后将字节数据发送到服务器。

如果要在上传之前将图像编码为JPEG或PNG格式，则as3核心库具有相应的编码器。

如果没有Flash，您可以随时下载Flex 3（或4）SDK，并使用FlashDevelop免费完成所有操作=）

- justlost

2

http://www.shift8creative.com/projects/agile-uploader/index.html

上传前可调整大小。灵活，紧密的JavaScript集成，可使用任何后端语言，快速，图像质量好。

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

免费使用。希望它能有所帮助。

- Tom

1

我不确定你是要实际调整图像大小还是只是设置显示图像的大小。前者是不可能的，后者可以使用jQuery设置宽度和高度属性。

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

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

- Spencer Ruport

0

如果您想在一条语句中完成，那么高度和宽度属性很可能是最好的选择。

如果您想要一些动画效果，可以使用 .animate(...) 命令，并将高度和宽度设置为参数。这应该会使图像变化更加平滑。

- hugoware

-2

图像应始终以其要显示的大小提供。最好在服务器上拥有多个副本，而不是将一个文件复制到网络上并尝试在客户端上进行操作。请考虑以下内容：

当您实际需要100X80时，传输500X400图像会浪费网络资源
在某些成像API中缩小/放大图像会浪费CPU资源

调整图像大小并不是简单地更改高度/宽度。当您指定与原始图像大小不同的大小（通过样式、脚本等），浏览器将使用本机API（例如win32 draw）来正确地缩小/放大图像。裁剪图像（丢失部分图像）更容易，但很少需要。

- Sesh

将相同大小的图像重复使用可以节省带宽，这在编程中非常有用。此外，当允许用户导入图像（例如在论坛中）时，您可能需要调整大小。-1表示“始终应该提供”。 - Pool

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Stodola · Accepted Answer

容易。

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