• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：Flickrのような綺麗なサムネイルを作りたい）

Flickrのような綺麗なサムネイルを作りたい

このQ&Aのポイント
  • FlickrのAPIで取得したサムネイルは非常に画質が綺麗なので、Flickrのサムネイルに近いくらいのサムネイルを作りたいと思っているのですが、ある疑問が浮かんで来ました。
  • Flickrから読み込んでいるサムネイルの元の画像はほとんど正方形ではないはずなのですが、どうしてこんなに綺麗なサムネイルになるのでしょうか？
  • 縦300の横の200の画像をソフトを利用して85×85の大きさにしても、元の画像が正方形ではないためFlickrのような綺麗なサムネイルは出来上がりません。どうすればFlickrのような綺麗なサムネイルが出来上がるのでしょうか？

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

#1です。 ＞Flickrの元の画像を見る限り、サムネイルでは縦のサイズが削られていると思います そうは見えませんが… #1の前半の方法のように思えます。（大抵は、元画像が横長なので、横幅がトリミングされていると思います） 中央をあわせるような一括処理なら機械的にできそうなきがしますが、サーバサイドのスクリプトはよくわかりませんので、適当に検索してみると、方法はいろいろですが、以下のようなものが… http://www.synck.jp/contents/products/weblogs/features/autoresize.html http://phpspot.org/blog/archives/2008/04/php_95.html http://biscuit.lovepop.jp/PHP/tools_image_resize.php http://jalbum.net/ja/ http://www.imagemagick.org/script/index.php 処理自体はたいしたことはなさそうなので、perl、phpなどでも可能かと思います。 効率を考えれば、画像アップ時にサムネイルを作成しておくのが良さそうですが、出力時に処理する方法を考えているものもあるようですね。 ここはjavascriptのカテゴリなので、javascriptで処理する例を… （スクリプトオフの時には効かなくなるので、お勧めはできません。） 方法的には#1の前半の方法ですが、param = "fit"にすれば後半の方法に変わります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #thumbnail { width:500px; } #thumbnail, #thumbnail li { list-style-type:none; margin:0; padding:0; } #thumbnail li { width:100px; height:100px; float:left; position:relative; overflow:hidden; } //--> </style> <script type="text/javascript"> <!-- window.onload = function(){ var size = 100; //←指定サイズ var param = "trim"; //←処理方法(trim/fit) var imgs = document.getElementById("thumbnail").getElementsByTagName("img"); var i, img, w, h, ratio; var func = param=="trim"?Math.min:param=="fit"?Math.max:function(){return size}; for(i=0; img=imgs[i++];){ if(img.complete && img.clientWidth){ ratio = size / func(img.clientWidth, img.clientHeight); w = ratio * img.clientWidth | 0; h = ratio * img.clientHeight | 0; img.style.position = "absolute"; img.style.width = w + "px"; img.style.height = h + "px"; img.style.top = ((size - h)/2 | 0) + "px"; img.style.left = ((size - w)/2 | 0) + "px"; } } } //--> </script> </head> <body> <ul id="thumbnail"> <li><img src="A.jpg" alt=""></li> <li><img src="B.jpg" alt=""></li> <li><img src="C.jpg" alt=""></li> <li><img src="D.jpg" alt=""></li> <li><img src="E.jpg" alt=""></li> <li><img src="F.jpg" alt=""></li> <li><img src="G.jpg" alt=""></li> <li><img src="H.jpg" alt=""></li> <li><img src="I.jpg" alt=""></li> </ul> </body> </html>

windowsweb
質問者

お礼

たくさん方法があるのですね、PHPとかまったく理解していないので、紹介していただいたのですが、勉強しないとなかなか利用できなさそうです。 javascriptでもサムネイルを作ることは可能なのですね。 早速試してみようと思います。 親身に回答していただき有難うございました。

すると、全ての回答が全文表示されます。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

実物を知らないので、想像での回答ですが… 画像の短い辺に合わせた正方形で、トリミングして表示しているのではないでしょうか？ 例えば、縦300ピクセルの横の200ピクセルの画像であれば その中央部を中心に、縦横200ピクセルを85×85のサイズに縮小して表示しているのでは？ （このような操作の結果、上下50ピクセル分ずつが表示されないことにはなりますが） あるいは逆に、長い辺に合わせた正方形の中に、余白を設けて表示するとか。 300×200の場合、300×300の中央に表示した状態のものを85×85に縮小表示。 （こちらの場合は、左右に50ピクセル（表示上は約15ピクセル）の余白ができます）

windowsweb
質問者

補足

回答有難うございます。 サンプルページにFlickrのサムネイルが表示されるようになっていますので、そちらをごらん頂ければ、Flickrのサムネイルが表示されていると思います。 ＞その中央部を中心に、縦横200ピクセルを85×85のサイズに縮小して表示しているのでは？ Flickrの元の画像を見る限り、サムネイルでは縦のサイズが削られていると思います。 ソフトを探してみましたが、手動でサムネイルにしたい部分を指定してサムネイルにできるソフトはありましたが、たくさんのサムネイルを作る場合時間がたくさんかかってしまうため、困っています。

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する