dポイントプレゼントキャンペーン実施中！

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

解決済

  • 質問者：windowsweb
  • 質問日時：
  • 回答数：2件

FlickrのAPIで取得したサムネイルは非常に画質が綺麗なので、Flickrのサムネイルに近いくらいのサムネイルを作りたいと思っているのですが、ある疑問が浮かんで来ました。

サンプルページ
http://sampleyoudesu.blog.fc2.com/blog-entry-2.h …

FlickrのAPIを利用してサンプルページを作ってみました、Flickrのサムネイルの大きさは全て、縦横85×85pxになっています。

Flickrから読み込んでいるサムネイルの元の画像はほとんど正方形ではないはずなのですが、どうしてこんなに綺麗なサムネイルになるのでしょうか？

縦300の横の200の画像をソフトを利用して85×85の大きさにしても、元の画像が正方形ではないためFlickrのような綺麗なサムネイルは出来上がりません。どうすればFlickrのような綺麗なサムネイルが出来上がるのでしょうか？

綺麗なサムネイルが作れるソフトや方法がありましたら、ぜひ教えていただけると幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#1です。



＞Flickrの元の画像を見る限り、サムネイルでは縦のサイズが削られていると思います
そうは見えませんが…
#1の前半の方法のように思えます。（大抵は、元画像が横長なので、横幅がトリミングされていると思います）

中央をあわせるような一括処理なら機械的にできそうなきがしますが、サーバサイドのスクリプトはよくわかりませんので、適当に検索してみると、方法はいろいろですが、以下のようなものが…
http://www.synck.jp/contents/products/weblogs/fe …
http://phpspot.org/blog/archives/2008/04/php_95. …
http://biscuit.lovepop.jp/PHP/tools_image_resize …
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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

たくさん方法があるのですね、PHPとかまったく理解していないので、紹介していただいたのですが、勉強しないとなかなか利用できなさそうです。

javascriptでもサムネイルを作ることは可能なのですね。
早速試してみようと思います。

親身に回答していただき有難うございました。

通報する
お礼日時：2012/03/07 14:12

No.1

  • 回答者： fujillin
  • 回答日時：

実物を知らないので、想像での回答ですが…





画像の短い辺に合わせた正方形で、トリミングして表示しているのではないでしょうか？

例えば、縦300ピクセルの横の200ピクセルの画像であれば
その中央部を中心に、縦横200ピクセルを85×85のサイズに縮小して表示しているのでは？
（このような操作の結果、上下50ピクセル分ずつが表示されないことにはなりますが）

あるいは逆に、長い辺に合わせた正方形の中に、余白を設けて表示するとか。
300×200の場合、300×300の中央に表示した状態のものを85×85に縮小表示。
（こちらの場合は、左右に50ピクセル（表示上は約15ピクセル）の余白ができます）

この回答への補足

回答有難うございます。

サンプルページにFlickrのサムネイルが表示されるようになっていますので、そちらをごらん頂ければ、Flickrのサムネイルが表示されていると思います。

＞その中央部を中心に、縦横200ピクセルを85×85のサイズに縮小して表示しているのでは？

Flickrの元の画像を見る限り、サムネイルでは縦のサイズが削られていると思います。

ソフトを探してみましたが、手動でサムネイルにしたい部分を指定してサムネイルにできるソフトはありましたが、たくさんのサムネイルを作る場合時間がたくさんかかってしまうため、困っています。

補足日時：2012/03/06 17:15
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報