如何在保持宽高比的同时在网页上显示已resize的图像?

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

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

简单。

   Client-Side Image Resize (Why?!)    

Look, I'm Resized!

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

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

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

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

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

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

http://www.swfupload.org/

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

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

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

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

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

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

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

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

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

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

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