- ベストアンサー
Flickrのような綺麗なサムネイルを作りたい
- FlickrのAPIで取得したサムネイルは非常に画質が綺麗なので、Flickrのサムネイルに近いくらいのサムネイルを作りたいと思っているのですが、ある疑問が浮かんで来ました。
- Flickrから読み込んでいるサムネイルの元の画像はほとんど正方形ではないはずなのですが、どうしてこんなに綺麗なサムネイルになるのでしょうか？
- 縦300の横の200の画像をソフトを利用して85×85の大きさにしても、元の画像が正方形ではないためFlickrのような綺麗なサムネイルは出来上がりません。どうすればFlickrのような綺麗なサムネイルが出来上がるのでしょうか？
- windowsweb
- お礼率80% (62/77)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （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>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
実物を知らないので、想像での回答ですが… 画像の短い辺に合わせた正方形で、トリミングして表示しているのではないでしょうか？ 例えば、縦300ピクセルの横の200ピクセルの画像であれば その中央部を中心に、縦横200ピクセルを85×85のサイズに縮小して表示しているのでは？ （このような操作の結果、上下50ピクセル分ずつが表示されないことにはなりますが） あるいは逆に、長い辺に合わせた正方形の中に、余白を設けて表示するとか。 300×200の場合、300×300の中央に表示した状態のものを85×85に縮小表示。 （こちらの場合は、左右に50ピクセル（表示上は約15ピクセル）の余白ができます）
補足
回答有難うございます。 サンプルページにFlickrのサムネイルが表示されるようになっていますので、そちらをごらん頂ければ、Flickrのサムネイルが表示されていると思います。 ＞その中央部を中心に、縦横200ピクセルを85×85のサイズに縮小して表示しているのでは？ Flickrの元の画像を見る限り、サムネイルでは縦のサイズが削られていると思います。 ソフトを探してみましたが、手動でサムネイルにしたい部分を指定してサムネイルにできるソフトはありましたが、たくさんのサムネイルを作る場合時間がたくさんかかってしまうため、困っています。
お礼
たくさん方法があるのですね、PHPとかまったく理解していないので、紹介していただいたのですが、勉強しないとなかなか利用できなさそうです。 javascriptでもサムネイルを作ることは可能なのですね。 早速試してみようと思います。 親身に回答していただき有難うございました。