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

What is the best and quickest way to resize images on the client side using JavaScript?

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

EDIT: Sorry, I meant the best way to display an image resized on the client side..

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

8 个解决方案

#1

Easy.

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

#2

If you are not too put off by flash, with flash10 now you have the choice of processing uploaded files on the client side before sending them to the server. So you could use a hidden/transparent/small flash object to allow the client to upload their image, have flash resize the image(it has some good image manipulation apis), then send the byte data to the server.

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

the as3 core lib has a jpeg and png encoders if you want to encode the image to either format before uploading.

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

If you don't have flash you can always download the flex 3(or 4) sdk and use flashdevelop to do it all gratis =)

如果您没有闪存,您可以随时下载flex 3(或4)sdk并使用flashdevelop完成所有操作=)

#3

Resizing before uploading would be a very powerful tool. This would reduce the time it takes to upload images to a server. Often our users have 5 mega-pixel images fresh off of their cameras and they have no clue how to reduce the size using an image editor. What we want uploaded is a 1500 pixel wide photo, jpg or png compressed to less than 500Kbytes.

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

This outfit Thin File claims to be able to do it but I haven't checked it out yet. I was rather hoping to find a way to use JQuery to do the same thing.

这个装备Thin File声称能够做到,但我还没有检查出来。我非常希望找到一种方法来使用JQuery来做同样的事情。

#4

flash 10 has support for resizing images on client side:

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

http://www.swfupload.org/

#5

http://www.shift8creative.com/projects/agile-uploader/index.html Resize before upload. Flexible, tight JavaScript integration, let's you use any back-end language, fast, good quality image.

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

A nicer demo than the main page that shows off the JavaScript integration: http://www.shift8creative.com/projects/agile-uploader/advanced-demo.html

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

Free as in beer. Hope it helps.

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

#6

I'm not sure if you mean actually resize the image or just set the size that the image is displayed at. One is impossible, the other would be to set the width and height properties using jQuery.

我不确定你的意思是实际调整图像大小,还是只设置图像显示的大小。一个是不可能的,另一个是使用jQuery设置width和height属性。

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

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

#7

If you're wanting to do it in a statement then the height and width properties would most likely be best.

如果你想在一个声明中这样做,那么高度和宽度属性最有可能是最好的。

If you're wanting something animated, you can use the .animate(...) command and set the height and width as parameters. That should make the image change a smooth transition.

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

#8

Images should always be served at the size they are to be displayed. It is better to have multiple copies on the server instead of copying one file over the network and trying to manipulate on client side. Consider this:

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

waste of network resource to transfer 500X400 image when you actually need 100X80

实际需要100X80时,浪费网络资源来传输500X400图像

similar waste of CPU in some imaging API to shrink/ enlarge the image on client side

在某些成像API中类似地浪费CPU以缩小/放大客户端上的图像

Resizing an image is not plain change of height/ width. When you specify a size different than (either through styles, script etc) the original image size, the browser will use native API (win32 draw for example) to properly shrink/enlarge the image. Cropping the image (losing portions of image) is easier but seldom wanted.

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

#1