使用jQuery更改图像的尺寸

Question

有没有一种方法可以在jQuery中更改（变大）图像的大小而不影响图像的质量？

- luckyluke

Answer 1

我认为你不行，因为图片的质量就是图片的质量...增加尺寸只会像放大图片一样。

如果您想知道jQuery是否可以重新采样图像，简单的答案是不行。除非向能够使用PHP等脚本语言进行重新采样的服务器发送AJAX请求，否则很遗憾您无法保持其质量。

希望这可以帮助您！ :)

- Chris Kempen

Answer 2

这只是调整大小，但你不能保留原有的质量来调整大小。

var max_size = 200;

$("img").each(function(i) {
  if ($(this).height() > $(this).width()) {
    var h = max_size;
    var w = Math.ceil($(this).width() / $(this).height() * max_size);
  } 
  else {
    var w = max_size;
    var h = Math.ceil($(this).height() / $(this).width() * max_size);
  }

  $(this).css({ height: h, width: w });

});

更多示例：

• Jquery调整图片大小
• http://archive.plugins.jquery.com/plugin-tags/image-resize
• http://ditio.net/2010/01/02/jquery-image-resize-plugin/

- Sameera Thilakasiri

---

@luckyluke 感谢您的赞赏，但如果您真的对答案满意，您应该接受答案并点赞，这也会提高您的声誉。 - Sameera Thilakasiri

Answer 3

对于普通的光栅图像（bmp，jpg，png等），使用客户端JavaScript调整大小会影响质量，因为图像的质量是有限的。一种方法是使用非常高质量的8000x8000图像，然后使用CSS将其缩小到所需的大小。

 img{
   width:800px;
   height:600px;
 } 

你可以使用jQuery调整它的大小，直到达到原始分辨率8000x8000以上才会有质量降低的感觉。

 $("img").css("width","1024px");
 $("img").css("height","768px");

有很多关于使用任何语言进行服务器端重新取样的问题。

• 动态缩放php jpg/png/gif图像
• 调整大小图像gdi+ graphics .net
• 调整大小C#中的图像
• 调整大小以最小化质量损失

更新

您没有说明使用哪种图像格式，您可以考虑使用SVG和HTML5，然后您将能够在客户端调整大小而不会降低质量。

• 如何将PNG图像转换为SVG？
• http://www.tutorialspoint.com/html5/html5_svg.htm
• 是否有可用于调整SVG大小的脚本？

- kamui

Answer 4

您可以通过更改图像的宽度和高度属性，使用jquery来缩放图像。但我并不太明白有关图像质量受损的部分，因为图像质量将与您上传的图像完全相同。

- XepterX

---

感谢XepterX。说到图像质量，我担心避免结果输出的像素化显示。 - luckyluke

你可以通过上传高分辨率的图片，然后使用CSS进行调整大小来避免这种情况。 - XepterX

Answer 5

jQuery并不适用于图像优化。它没有图形原语。为什么你想在javascript中做这个呢？你没有服务器端语言吗？

无论如何，你应该看看canvas来完成这个任务。可以参考这篇SO帖子或者这篇。

- Grooveek

Answer 6

jQuery没有直接的方法来实现这个功能。你可以尝试使用Flash或者Applet来解决问题。

或者

你可以尝试将图像渲染到画布上，然后对画布中的像素应用缩放算法（双线性、双三次等），并将输出渲染到另一个画布上。完成后，你可以从画布中获取图像数据，并通过AJAX发送回服务器进行保存。有关缩放算法的更多信息，请参考：http://en.wikipedia.org/wiki/Image_scaling）

- techfoobar

---

谢谢 techfoobar。我会尝试的。 - luckyluke