5

JavaScriptを使用してクライアント側で画像のサイズを変更するための最良かつ最速の方法は何ですか？

編集：申し訳ありませんが、クライアント側でサイズ変更された画像を表示するための最良の方法を意味しました。

4

8 に答える 8

7

簡単。

<!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-10T05:39:52.960 に答える
3

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

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

于 2009-10-05T20:36:27.407 に答える
3

フラッシュが嫌いでない場合は、flash10 を使用すると、アップロードされたファイルをサーバーに送信する前に、クライアント側で処理することを選択できます。したがって、非表示/透明/小さなフラッシュ オブジェクトを使用して、クライアントが画像をアップロードできるようにし、フラッシュで画像のサイズを変更し (適切な画像操作 API を備えています)、バイト データをサーバーに送信できます。

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

フラッシュがない場合は、いつでも flex 3 (または 4) SDK をダウンロードし、flashdevelop を使用してすべて無料で行うことができます =)

于 2009-06-10T06:06:21.453 に答える
3

flash 10 では、クライアント側での画像のサイズ変更がサポートされています。

http://www.swfupload.org/

于 2009-11-25T16:07:29.550 に答える
2

http://www.shift8creative.com/projects/agile-uploader/index.html アップロード前にサイズを変更します。柔軟で緊密な JavaScript 統合により、バックエンド言語、高速、高品質の画像を使用できます。

JavaScript 統合を示すメイン ページよりも優れたデモ: http://www.shift8creative.com/projects/agile-uploader/advanced-demo.html

ビールのように無料。それが役に立てば幸い。

于 2010-02-23T20:53:17.333 に答える
1

実際に画像のサイズを変更するのか、画像が表示されるサイズを設定するだけなのかはわかりません。1つは不可能であり、もう1つはjQueryを使用して幅と高さのプロパティを設定することです。

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

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

于 2009-06-10T03:48:38.443 に答える
0

ステートメントでそれを行いたい場合は、おそらく高さと幅のプロパティが最適です。

何かをアニメーション化する必要がある場合は、.animate(...)コマンドを使用して、高さと幅をパラメーターとして設定できます。これにより、画像の変化がスムーズに移行するはずです。

于 2009-06-10T03:52:32.860 に答える
-2

画像は常に、表示されるサイズで提供する必要があります。ネットワーク経由で 1 つのファイルをコピーしてクライアント側で操作するよりも、サーバーに複数のコピーを用意することをお勧めします。このことを考慮：

  • 実際には 100X80 が必要なときに 500X400 の画像を転送するためのネットワーク リソースの浪費
  • クライアント側で画像を縮小/拡大するための一部のイメージング API での同様の CPU の浪費

画像のサイズ変更は、高さ/幅の単純な変更ではありません。元の画像サイズとは異なるサイズを (スタイル、スクリプトなどを使用して) 指定すると、ブラウザーはネイティブ API (win32 描画など) を使用して画像を適切に縮小/拡大します。画像のトリミング (画像の一部を失う) は簡単ですが、ほとんど必要ありません。

于 2009-06-10T04:31:28.270 に答える