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

如果您没有被闪存推迟，现在使用flash10可以选择在客户端处理上传文件，然后再将其发送到服务器。所以你可以使用一个隐藏/透明/小的flash对象来允许客户端上传他们的图像，让flash调整图像大小（它有一些好的图像处理apis），然后将字节数据发送到服务器。

as3核心lib有一个jpeg和png编码器，如果你想在上传之前将图像编码为任一格式。

如果您没有闪光灯，您可以随时下载flex 3（或4）sdk并使用flashdevelop完成所有操作=）

Answer 3

上传前调整大小将是一个非常强大的工具。这将减少将图像上载到服务器所花费的时间。我们的用户通常会从他们的相机中获得5百万像素的图像，他们不知道如何使用图像编辑器缩小尺寸。我们想要上传的是1500像素宽的照片，jpg或png压缩到小于500K字节。

这套服装Thin File声称能够做到，但我尚未检查过。我非常希望找到一种方法来使用JQuery来做同样的事情。

Answer 4

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

http://www.swfupload.org/

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
在某些成像API中类似的CPU浪费，以缩小/放大客户端的图像

调整图像大小不是高度/宽度的明显变化。当您指定不同于（通过样式，脚本等）原始图像大小的大小时，浏览器将使用本机API（例如win32 draw）来正确缩小/放大图像。裁剪图像（丢失部分图像）比较容易，但很少需要。

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

8 个答案: