問題タブ [image-resizing]

質問があります。いくつかのウェブショップ製品のデータベースがあります。URL (domain.com) から 2 つの画像を読み込みます。1 つはサムネイル画像 (product_thumb_image) 用で、もう 1 つは完全な画像です。(product_full_image)

同じ URL を使用し、イメージ タグにHeight="100"属性を指定してイメージのサイズを変更します。これが正しい方法ではないことはわかっていますが、Web ショップにイメージを一括挿入する他の方法はわかりません。私のウェブショップ（virtuemart）のバックエンドに写真を1つずつ挿入することなく

私の質問: フル イメージ サイズをロードせずに、Height="100"属性でサイズを変更することなく、データベースで直接イメージのサイズを変更するにはどうすればよいですか?

以下はデータベースの一部です。product_thumb_image テーブルにある画像のサイズを (自動で) 変更するアイデアがあるかもしれません。

約 20000 枚の画像のフォルダーがあり、それらのサムネイル画像を生成する必要があります。

この仕事をするための最速の方法は何ですか?

いくつかの画像サイズ変更ライブラリを使用して実行できることはわかっています。しかし、この仕事を実行できるツールまたはコード スニペットが既に存在するのではないかと考えています。

HTML / CSSのみを使用して（つまり、サーバーコードなしで）画像のサイズを変更し、その比率を維持してトリミング効果を持たせるにはどうすればよいですか。詳細：指定された幅にサイズ変更し、比率を維持し、高さが指定された値よりも大きい場合は、指定された高さにトリミングしますか？

実際、私はいくつかのサーバーコードを使用してそれを行う方法を知っていますが、これはしたくありません。これは、別のファイル参照を使用することを意味し、のような画像を参照します<img src="picture.php" />。画像を表示するのと同じページで画像を処理する必要があります。

私を「悩ませている」のは、ページ上に他に何も表示されないように、画像ヘッダーを送信する必要があるということです。

そのようなことをする方法はありますか？たぶん純粋なHTML/CSSからですか？：P

私はそのようなことをする関数を作りました（「切り抜き」のことを除いて）そしてそれはちょうど戻りwidth="" height=""、私はそれをこのように使用します<img src="image.jpg" resize("image.jpg") />、しかし私はどうやってその切り抜きをすることができますか...

ありがとう

私の会社は最近、当社のWebサイトの画像処理で問題が発生し始めました。

DVDカバー、スナップショットなどの画像を表示するいくつかのWebサイト（アダルトエンターテインメント）があります。約10万本の映画があり、映画ごとに平均30本のスナップショットとカバーがあります。ほとんどすべての画像には、非会員向けのぼかしとオーバーレイを備えた追加バージョンがあります。これにより、ムービーごとに約50枚の画像、または合計500万枚のベース画像が作成されます。各画像は、ページ上のどこに配置されているか（サムネイル、オリジナル、小さいプレビュー、それほど小さくないプレビュー、トップリストの小さい画像など）に応じて、いくつかのバージョンで利用できます。私は数えることを気にした。

サーバーを使用してオンザフライで画像を生成することを思いついたのは、すべての異なるページに対してすべての異なる画像を生成するのが非常に不器用になったためです（基本的に同じタスクで異なるページが異なる画像サイズを必要とする場合もあるため） 。

画像をオンザフライで縮小できる画像処理サーバーを知っている人はいますか？元の画像を提供するだけで、ウェブ担当者は必要なサイズをリクエストできますか？

要件：

• 非常に高いパフォーマンス（1日あたり数千人のユーザー）
• オンザフライのぼかしとオーバーレイの作成
• オンザフライのサイズ変更（アスペクト比を維持する場合としない場合）
• 何百万もの画像を処理できます
• JPG、GIF、PNG、BMPを読み取り、それらの間で変換できる必要があります

セキュリティはそれほど重要ではありません。つまり、ぼやけていない画像はURL操作によってすでに到達可能であり、より多くのセキュリティがあればよいのですが、それは必須ではなく、率直に言って私は気にかけるのをやめました（同僚の頭に入るのに失敗した後、なぜ（私たちの小さな再販業者のために）ページ） http://example.com/view_image.php?filename=/data/images/01020304.jpgを使用して画像を表示することはお勧めできません）。

これを行うためにPHPスクリプトを試しましたが、この多くのユーザーにとってパフォーマンスが遅すぎました。

あなたが持っているどんな提案にも前もって感謝します。

javascriptとcanvas要素を使用してクライアント側でサムネイル画像を作成しようとしていますが、画像を縮小するとひどく見えます。フォトショップでリサンプリングがバイキュービックではなく「最近傍」に設定されて縮小されたように見えます。このサイトはキャンバスを使用しても問題なく実行できるため、これを正しく表示することが可能であることを私は知っています。「[ソース]」リンクに示されているのと同じコードを使用してみましたが、それでもひどいようです。足りないもの、設定が必要な設定などはありますか？

編集：

jpgのサイズを変更しようとしています。リンク先のサイトとフォトショップで同じjpgのサイズを変更してみましたが、サイズを小さくすると見栄えが良くなります。

関連するコードは次のとおりです。

EDIT2：

私は間違っていたようです。リンクされたウェブサイトは、画像を縮小するという仕事を上手く行っていませんでした。私は提案された他の方法を試しましたが、どれも良く見えません。これは、さまざまな方法で得られたものです。

Photoshop：

キャンバス：

画像レンダリングを使用した画像：optimizeQualityを設定し、幅/高さでスケーリング：

画像レンダリングを使用した画像：optimizeQualityを設定し、-moz-transformでスケーリングします。

pixasticでのキャンバスのサイズ変更：

これは、Firefoxが想定どおりにバイキュービックサンプリングを使用していないことを意味していると思います。彼らが実際にそれを追加するまで私はただ待たなければならないでしょう。

EDIT3：

元の画像

小さい画像（例：20x25）を大きい画像（例：150x170）にサイズ変更しています。私の問題は品質に関するものではなく、予想通り、多少のぼやけがあります。私の問題は、画像の右側と下部に明るい色の境界線が作成されていることです。これを削除する方法はありますか？

私のコードは次のとおりです。

ありがとう！

さまざまなサイズと縦横比から正確に 60x80px にサイズ変更してトリミングする必要があります。データストアに入れる直前。誰もがすでにこの問題を解決しています。

現在、リストに表示しようとすると見栄えがよくないさまざまな幅の正確な高さ（80px）に変換することにすでに成功しています。例: jcaroussel。

私の db.put コードは次のようになります。

Googleトーク/Googleチャットにアバターをアップロードするときに、同様の結果を出したいだけです。

誰でもこれを解決しましたか？

どうも

次のコードを使用して、モノクロ画像のサイズを変更する次のコードがあります（したがって、ピクセル値は0 [黒]または255 [白]です）

私が抱えている問題は、サイズ変更後 (画像を拡大している)、一部のピクセル値が 254、253、1、2 などになることです (したがって、単色ではありません)。これが発生しないようにする必要があります。Graphins プロパティの 1 つを変更することで、これは可能ですか?

私は画像共有サイトを構築していますが、PHPを使用してその場で画像のサイズを変更し、サイズ変更した画像を保存することの長所と短所を知りたいと思います。

どちらが速いですか？

どちらがより信頼できますか？

速度とパフォーマンスの2つの方法のギャップはどのくらいですか？

ビューなどの統計情報のために画像がPHPスクリプトを通過する方法、またはホットリンクが許可されている場合などに注意してください。サイズ変更された画像を保存することを選択した場合、画像への直接リンクにはなりません。

この件に関するコメントや役立つリンクをいただければ幸いです。

私はjQueryの初心者です。この質問の基本的な可能性を許してください。

私はかなり単純なことをしています - ホバーで画像の位置とサイズをアニメーション化します。画像の上にマウスを置くと、目立つ「ジャギー」がいくつかあります (FF、chrome、safari、およびその他のくだらないブラウザーで)。これを取り除く方法はありますか? jquery コードは次のとおりです。ライブ リンクはkristechdev.metropoliscreative.com です(アイコンにカーソルを合わせます)。