在jQuery中更改图像的尺寸

Is there a way to change (making bigger) the size of image without compromising the quality of the image in jQuery?

有没有办法在不影响jQuery图像质量的情况下改变(增大)图像的大小?

6 个解决方案

#1

This is just resize, but you can't resize them without losing quality.

这只是调整大小,但你不能在不失去质量的情况下调整大小。

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

});

More examples:

Jquery resizing image

Jquery调整图像大小

http://archive.plugins.jquery.com/plugin-tags/image-resize
http://ditio.net/2010/01/02/jquery-image-resize-plugin/

#2

I don't think you can, the quality of the image is, well, the quality of the image...increasing the dimensions would just be like zooming in on that image.

我不认为你可以,图像的质量,以及图像的质量......增加尺寸就像放大图像一样。

If you're asking whether or not jQuery can resample an image, the simple answer is no, and short of sending AJAX requests to a server which can do the resampling in a scripting language like PHP, there's not much you can do to keep its quality unfortunately.

如果你问的是jQuery是否可以对图像进行重新采样,那么简单的答案是否定的,并且没有将AJAX请求发送到可以用PHP这样的脚本语言进行重新采样的服务器,你可以做的就是保持它质量不幸。

I hope this helps! :)

我希望这有帮助! :)

#3

You can't resize without affecting quality with clientside JavaScript in normal raster images (bmp,jpg,png,etc), as the quality of the image is finite, one way could be to use a very high quality image 8000x8000 and then reduce it to the size you want with css.

在普通光栅图像(bmp,jpg,png等)中使用客户端JavaScript不能影响质量,因为图像的质量是有限的,一种方法是使用非常高质量的图像8000x8000,然后减少它用css达到你想要的大小。

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

You can then use jquery to resize it, and you won't notice a quality reduction until you start getting to over the original resolution, which in this case is 8000x8000

然后你可以使用jquery来调整它的大小,在你开始超越原始分辨率之前你不会注意到质量降低,在这种情况下是8000x8000

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

There are lots of questions covering re-sampling serverside using whatever language it is

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

dynamically scale images in php jpg/png/gif

在php jpg / png / gif中动态缩放图像

Resize image gdi+ graphics .net

调整图像gdi + graphics .net的大小

Resize an Image C#

调整图像大小C#

Resize with minimal loss of quality

调整大小,质量损失最小

Update

You haven't said what image format you are using, you could consider using SVG, and HTML5 then you will be able to resize to any size clientside without reduction in quality.

您还没有说过您正在使用的图像格式,您可以考虑使用SVG和HTML5,然后您就可以调整到任何大小的客户端,而不会降低质量。

How to convert a PNG image to a SVG?

如何将PNG图像转换为SVG?

http://www.tutorialspoint.com/html5/html5_svg.htm
Is there a script available to resize SVG?

是否有可用于调整SVG大小的脚本?

#4

you can scale an images with jquery by changing their width and height attributes. I don't really get the part of about the image quality being compromised though as the image quality would be well, the same as you've uploaded it.

您可以通过更改其宽度和高度属性来使用jquery缩放图像。虽然因为图像质量很好,就像你上传它一样,我并没有真正理解图像质量受损的部分。

#5

jQuery is not intended to do image optimization. It has no graphics primitives. Why would you like to do that in javascript ? You don't have a server-side language ?

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

Anyway, you should look at the canvas for doing this. Have a look at this SO post or this one

无论如何,你应该看看画布这样做。看看这个SO帖子或者这个帖子

#6

jQuery contains no direct method for doing that. You can probably find a solution that uses Flash or maybe an Applet.

jQuery没有直接的方法来做到这一点。您可以找到使用Flash或Applet的解决方案。

You can try rendering your image to a canvas and then apply a scaling routine (bilinear, bicubic etc..) to the pixels in the canvas and render the output to another canvas. Once done, you can get the image data from the canvas and send it back to your server via AJAX for saving. For more info on scaling algorithms, refer: check: http://en.wikipedia.org/wiki/Image_scaling)

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

#1