在jQuery中更改圖像的尺寸

3

這只是調整大小，但不能在不損失質量的情況下調整大小。

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

});

更多的例子：

來源

2012-01-13 08:35:51

+0

感謝代碼Sameera Thilakasiri。 – luckyluke 2012-01-16 03:35:04

+0

@luckyluke感謝您的讚賞，但如果您真的滿意答案，您應該接受答案並進行投票，它也會給您帶來聲望。 – 2012-01-16 04:21:21

3

我不認爲你可以，圖像的質量是，圖像的質量...增加尺寸就像放大該圖像。

如果你問jQuery是否可以重新採樣圖像，簡單的答案是否定的，並沒有發送AJAX請求到一個服務器，可以在像PHP這樣的腳本語言中進行重採樣，你可以不幸的是保持它的質量。

我希望這有助於！ :)

來源

2012-01-13 08:33:13

+0

感謝克里斯Kempen的 – luckyluke 2012-01-16 03:31:28

0

你可以通過改變它們的寬度和高度屬性來用jQuery來縮放圖像。雖然圖像質量不錯，但我並沒有真正瞭解圖像質量受損的部分，就像您上傳圖像一樣。

來源

2012-01-13 08:35:16 XepterX

+0

感謝XepterX。說到圖像質量，我擔心會避免像素化顯示輸出結果。 – luckyluke 2012-01-16 03:34:34

+0

你可以通過上傳高分辨率圖片然後使用css調整圖片大小來避免這種情況。 – XepterX 2012-01-16 03:45:14

1

你不能沒有正常光柵圖像影響與客戶方的JavaScript質量調整（BMP，JPG ，png等），因爲圖像的質量是有限的，有一種方法可以b e使用非常高質量的圖像8000x8000，然後使用css將其縮小到所需的大小。

然後，您可以使用jQuery來調整它，你不會注意到質量下降，直到你開始了原始分辨率，在這種情況下是8000x8000

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

有前往很多的問題用什麼語言是

dynamically scale images in php jpg/png/gif
覆蓋重採樣服務器端
Resize an Image C#
Resize with minimal loss of quality

更新

你還沒有說什麼樣的形象，你正在使用的格式，你可以考慮使用SVG和HTML5，那麼你將能夠調整到任何規模的客戶都不會降低質量。

來源

2012-01-13 08:36:07 kamui

0

jQuery是不打算做圖像優化。它沒有圖形基元。爲什麼你想在JavaScript中做到這一點？你沒有服務器端語言？

無論如何，你應該看看在畫布這樣做。看看this SO post或this one

來源

2012-01-13 08:36:40 Grooveek

+0

感謝Grooveek – luckyluke 2012-01-16 03:36:43

0

的jQuery包含這樣做沒有直接的方法。您大概可以找到使用Flash或Applet的解決方案。

OR

你可以嘗試繪製圖像的畫布，然後應用比例程序（雙線性，雙三次等）的像素在畫布和渲染輸出到其他畫布。完成後，您可以從畫布中獲取圖像數據，並通過AJAX將其發送回服務器進行保存。有關縮放算法的詳細信息，請參閱：檢查：http://en.wikipedia.org/wiki/Image_scaling）

來源

2012-01-13 08:39:07 techfoobar

+0

謝謝techfoobar。我會嘗試 – luckyluke 2012-01-16 03:37:12

在jQuery中更改圖像的尺寸

回答

相關問題