jqueryで画像を拡大/縮小する方法

Question

jQueryを使用してAJAX経由で呼び出されるPHPファイルに挿入される画像を拡大/縮小するにはどのような方法が最適ですか？

私は画像が600pxの幅と410pxの高さをバイパスしないようにしていますが、画像がこの寸法を超えて奇妙に見えることは望ましくありません。しかし、ちょうど小さいスケールで。

また、既存のFlashスクリプトでこれを行う方法があれば、PicasawebサービスでGoogleが使用するような簡単なものは思い出せません。事前

Answer 1

で

おかげで元画像の実際の大きさHTMLImageElementリターンのnaturalWidthとnaturalHeight DOMプロパティ。

if (imageElement.naturalWidth > imageElement.naturalHeight) 
    imageElement.style.width = '600px'; 
else 
    imageElement.style.height = '410px'; 

• 風景画像例：http://jsbin.com/ogisej/13
• 人物画像例：http://jsbin.com/ogisej/14
• スクエア画像例：例では、サイズ変更コードがloadに入れられる方法http://jsbin.com/ogisej/15

お知らせサイズ情報が利用可能なときにサイズを変更するだけであるように、それ以外の場合、naturalWidthとnaturalHeightはゼロになり、問題が発生します。あなたは、画像を見てまごまごしている場合、縮小、大きなオフを開始、デフォルトで画像を非表示にして、リサイズした後、それを示しています。

• 風景画像例：http://jsbin.com/ogisej/17
• 肖像画のイメージ例：http://jsbin.com/ogisej/18
• スクエア画像例：jQueryの、NORフラッシュのためのhttp://jsbin.com/ogisej/19

必要がありません。ここで）

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

は、ここではアクションでそれをチェックアウト：画像のhttp://jsfiddle.net/QgDEk/

元のサイズは巨大であるが、そのスクリプトはそれのサイズを変更します。

ここにtutorialがあります。

Answer 3

ここでは、最大幅と高さをサポートする例を示します。

// Set max width and height 
var maxHeight = 50, 
    maxWidth = 40; 

// Create new image 
myImage = new Image(); 
myImage.src = 'http://dummyimage.com/600x400/000/fff'; 

// On load of image 
myImage.onload = function() { 

    var width = myImage.width, 
     height = myImage.height, 
     ratio = Math.min(maxWidth/width, maxHeight/height); 

    newWidth = parseInt(ratio * width); 
    newHeight = parseInt(ratio * height); 

    $('body').append('<p>Original: ' + width + ' x ' + height + '</p>'); 
    $('body').append('<p>Max: ' + maxWidth + ' x ' + maxHeight + '</p>'); 
    $('body').append('<p>Resized: ' + newWidth + ' x ' + newHeight + '</p>'); 

    // Add new image 
    $('body').append($('<img>', { 
     src: 'http://dummyimage.com/' + newWidth + 'x' + newHeight + '/000/fff', 
     width: newWidth, 
     height: newHeight, 
     alt: "Test Image", 
     title: "Test Image" 
    })); 
};