5

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

编辑：对不起，我的意思是在客户端显示调整大小的图像的最佳方式..

4

8 回答 8

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-10T05:39:52.960 回答
3

如果您对 flash 不太感兴趣，现在使用 flash10，您可以选择在客户端处理上传的文件，然后再将它们发送到服务器。因此，您可以使用隐藏/透明/小型 flash 对象来允许客户端上传他们的图像，让 flash 调整图像大小（它有一些很好的图像处理 api），然后将字节数据发送到服务器。

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

如果您没有 flash，您可以随时下载 flex 3（或 4）sdk 并使用 flashdevelop 免费完成这一切 =）

于 2009-06-10T06:06:21.453 回答
3

在上传之前调整大小将是一个非常强大的工具。这将减少将图像上传到服务器所需的时间。通常，我们的用户从他们的相机中获得了 5 兆像素的图像，他们不知道如何使用图像编辑器来减小尺寸。我们要上传的是 1500 像素宽的照片，jpg 或 png 压缩到小于 500Kbytes。

这件装备Thin File 声称能够做到，但我还没有检查过。我宁愿找到一种方法来使用 JQuery 来做同样的事情。

于 2009-10-05T20:36:27.407 回答
3

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

http://www.swfupload.org/

于 2009-11-25T16:07:29.550 回答
2

http://www.shift8creative.com/projects/agile-uploader/index.html 上传前调整大小。灵活、紧密的 JavaScript 集成，让您使用任何后端语言，快速、优质的图像。

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

像啤酒一样免费。希望能帮助到你。

于 2010-02-23T20:53:17.333 回答
1

我不确定您的意思是实际调整图像大小还是仅设置图像显示的大小。一种是不可能的，另一种是使用 jQuery 设置宽度和高度属性。

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

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

于 2009-06-10T03:48:38.443 回答
0

如果您想在声明中执行此操作，那么高度和宽度属性很可能是最好的。

如果您想要动画，您可以使用该.animate(...)命令并将高度和宽度设置为参数。那应该使图像变化平滑过渡。

于 2009-06-10T03:52:32.860 回答
-2

图像应始终以要显示的尺寸提供。最好在服务器上有多个副本，而不是通过网络复制一个文件并尝试在客户端进行操作。考虑一下：

  • 实际需要 100X80 传输 500X400 图像浪费网络资源
  • 在某些成像 API 中类似的 CPU 浪费来缩小/放大客户端的图像

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

于 2009-06-10T04:31:28.270 回答