アスペクト比を維持したままウェブページにサイズ変更された画像を表示するには？

JavaScriptを使用してクライアント側で画像のサイズを変更するには、どの方法が最適ですか？アスペクト比を維持したままウェブページにサイズ変更された画像を表示するには？

編集：申し訳ありませんが、私は

2009-06-10 mattt

クライアントから画像をアップロードするときに、サーバーに送信する前に画像のサイズを変更して、ネットワークトラフィックを最小限に抑える方法が必要なのでしょうか？ –

@ジェフリー：うん、まったく正しい。それ以外の場合は、サーバー側のサイズを変更してからワイヤを送信してください。 –

@mattt：画像をアップロードする前に、画像のサイズを変更するためのソリューションを提供してくれた多くの人がいました。それはあなたが探していたものですか？（質問の現在のテキストは少し不明であり、編集が役に立ちます）。 –

簡単。あなたはflash10で、フラッシュから、うんざりしていない場合

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Client-Side Image Resize (Why?!)</title> 
    <script type="text/javascript"> 
     window.onload = function() { 
     var url = "http://www.google.com/intl/en_ALL/images/logo.gif"; 
     var img = new Image(); 
     img.onload = function() { 
      var w = parseInt((this.width + "").replace(/px/i, ""), 10); 
      var h = parseInt((this.height + "").replace(/px/i, ""), 10); 

      // 50% scale 
      w = (w/2) + "px"; 
      h = (h/2) + "px"; 

      var htmlImg = document.createElement("img"); 
      htmlImg.setAttribute("src", url); 
      htmlImg.setAttribute("width", w); 
      htmlImg.style.width = w; 
      htmlImg.setAttribute("height", h); 
      htmlImg.style.height = h; 
      document.body.appendChild(htmlImg); 
     } 
     img.src = url; 
     } 
    </script> 
    </head> 
    <body> 
    <h1>Look, I'm Resized!</h1> 
    </body> 
</html>

出典

2009-06-10 05:39:52

重量と高さを作っても画像のサイズが変わるわけではありません。 –

... 表示クライアント側でリサイズされた画像への最善の方法を意味し、私はあなたが意味する場合は、実際に画像のサイズを変更するか、単にそのサイズを設定するかわかりません画像はで表示されます。 1つは不可能です。もう1つは、jQueryを使って幅と高さのプロパティを設定することです。

http://docs.jquery.com/CSS/height

http://docs.jquery.com/CSS/width

出典

2009-06-10 03:48:38

あなたは声明の中でそれをやりたいと思っている場合は、高さと幅のプロパティは、最も可能性の高い最高のだろう。

アニメーションが必要な場合は、.animate(...)コマンドを使用して、高さと幅をパラメータとして設定できます。そうすれば、イメージがスムーズに変化するはずです。

出典

2009-06-10 03:52:32 Hugoware

-2

画像は常に表示されるサイズで表示されます。ネットワーク上で1つのファイルをコピーし、クライアント側で操作しようとするのではなく、サーバー上に複数のコピーを置く方がよいでしょう。このことを考えてみましょう：ネットワークリソースの

廃棄物はあなたが実際にサイズ変更クライアント側

上の画像を拡大/縮小するためにいくつかのイメージングAPIでCPUの100X80

同様の廃棄物を必要なときに500X400画像を転送します画像は高さ/幅の単純な変化ではありません。オリジナルの画像サイズと異なるサイズ（スタイル、スクリプトなどのいずれか）を指定すると、ブラウザはネイティブAPI（win32 drawなど）を使用して画像を適切に縮小/拡大します。画像を切り取る（画像の一部を失う）のは簡単ですが、ほとんど望みません。

出典

2009-06-10 04:31:28 Sesh

-1は「常に提供する必要があります」。異なるサイズで同じイメージを再利用することは、帯域幅を節約するのに役立ちます。さらに、ユーザーがイメージをインポートすることを許可する場合（例えばフォーラムで）、サイズを変更することができます。 – Pool

は今、あなたは、サーバーに送信する前に、クライアント側の処理アップロードされたファイルを選択することができます。だからあなたは、クライアントが画像をアップロードし、画像のサイズを変更して（それはいくつかの良い画像操作apisを持っている）、サーバーにバイトデータを送信させるために、隠された/透過的な/小さなフラッシュオブジェクトを使用することができます。

アップロードする前に画像をいずれかの形式にエンコードする場合は、as3コアライブラリにjpegとpngエンコーダがあります。

あなたはフラッシュを持っていない場合は、必ずフレックス3（または4）SDKをダウンロードして、非常に強力なツールになりアップロードする前に）=すべて無償で

出典

2009-06-10 06:06:21 justlost

サイズ変更をそれを行うにはFlashDevelopの使用することができます。これにより、イメージをサーバーにアップロードするのにかかる時間が短縮されます。多くの場合、ユーザーはカメラから5メガピクセルの画像を取得することができ、イメージエディタを使用してサイズを縮小する方法はありません。私たちがアップロードしたいのは1500ピクセル幅の写真、jpgまたはpngが500Kバイト未満に圧縮されていることです。

この服はThin Fileがそれを行うことができると主張していますが、私はまだそれをチェックアウトしていません。私は、JQueryを使って同じことをする方法を見つけることをむしろ望んでいました。

出典

2009-10-05 20:36:27

フラッシュ10は、クライアント側で画像のサイズを変更するためのサポートを持っています

http://www.swfupload.org/

出典

2009-11-25 16:07:29 Andras