在 jQuery 中更改图像的尺寸答案

【问题标题】：Change the dimensions of a image in jQuery在 jQuery 中更改图像的尺寸
【发布时间】：2012-02-09 11:46:39
【问题描述】：

有没有办法在不影响 jQuery 中图像质量的情况下改变（放大）图像的大小？

【问题讨论】：

【解决方案1】：

这只是调整大小，但你不能在不损失质量的情况下调整它们的大小。

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 });

});

更多示例：

【讨论】：

@luckyluke 感谢您的赞赏，但如果您真的对答案感到满意，您应该接受答案并进行投票，它也会给您带来声誉。

【解决方案2】：

我不认为你可以，图像的质量，嗯，图像的质量......增加尺寸就像放大那个图像。

如果您询问 jQuery 是否可以重新采样图像，简单的答案是否定的，并且没有将 AJAX 请求发送到可以使用 PHP 等脚本语言进行重新采样的服务器，您无能为力不幸的是要保持它的质量。

我希望这会有所帮助！ :)

【讨论】：

【解决方案3】：

您不能在不影响普通光栅图像（bmp、jpg、png 等）中客户端 JavaScript 的质量的情况下调整大小，因为图像的质量是有限的，一种方法是使用非常高质量的图像 8000x8000 和然后用 css 把它缩小到你想要的大小。

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

然后您可以使用 jquery 来调整它的大小，并且在您开始超过原始分辨率（在本例中为 8000x8000）之前，您不会注意到质量下降

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

有很多问题涉及使用任何语言重新采样服务器端

更新

您还没有说您使用的是什么图像格式，您可以考虑使用 SVG 和 HTML5，然后您将能够在不降低质量的情况下调整到任何大小的客户端。

【讨论】：

【解决方案4】：

您可以使用 jquery 通过更改图像的宽度和高度属性来缩放图像。我真的不知道图像质量会受到影响，尽管图像质量会很好，就像你上传的一样。

【讨论】：

感谢 XepterX。说到图像质量，我担心避免结果输出的像素化显示。
您可以通过上传高分辨率图片然后使用 css 调整其大小来避免这种情况。

【解决方案5】：

jQuery 不打算进行图像优化。它没有图形基元。为什么要在 javascript 中这样做？你没有服务器端语言？

无论如何，您应该查看画布以执行此操作。看看this SO post 或this one

【讨论】：

【解决方案6】：

jQuery 不包含这样做的直接方法。您可能会找到使用 Flash 或 Applet 的解决方案。

或

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

【讨论】：

感谢 techfoobar。我会试试的