画像を縮小するお話     2011/08/20 @techno_neko
自己紹介所属:Hokkaido.pmTwitterID:@techno_neko職種:組み込み系
画像縮小とは・ 一番身近な画像処理・ サムネイル作成とか・ プラグインだと・・・?
プラグインだと・・・?アップロードした画像のサムネイルを並べて表示して、スライドショーしたり・・・
プラグインだと・・・?アップロードした画像のサムネイルを並べて表示して、スライドショーしたり・・・オンラインフォトアルバムとか!
PhotoShop の場合 いろんな方式があるよ!
いろんな方式・ ニアレストネイバー・ バイリニア・ バイキュービック・ etc...
ニアレストネイバー・ 単純なので高速・ ジャギーが目立つ・ あまり見かけないかも(ブラウザ等でたまに見かける程度)
ニアレストネイバー8x8 の画像を 4x5 に縮小する× 印の位置をサンプリングする          こんな感じ
バイリニア・ 線形補間を行う・ 使うなら 50% くらいまで・ バイキュービックがないなら  これを使う
バイリニア周辺 4 画素を線形補間する     1       3P1               P2                      (1) P1 と P2 を 1:3 で補間         3                 ...
バイキュービック・ たくさん計算する・ 25% くらいまで使える・ PhotoShop の画像解像度で  最初に選択されている
バイキュービック周辺の画素をたくさん参照する  ちょっと難しい
やってみる (1)ニアレストネイバーの実演use strict;use warnings;use Imager;my $img_src = Imager->new( file=>$ARGV[0] ) or    die Imager->errs...
やってみる (2)Imager と PhotoShop の比較use strict;use warnings;use Imager;my $img = Imager->new( file=>$ARGV[0] ) or    die Imager...
やってみる (3)ボケボケの絵を、ニアレストネイバーで縮小すると?
まとめバイキュービックでも、こんな風にサンプリングすると汚くなる
まとめきれいに縮小するには?・ 周辺画素を贅沢に参照する・ フィルターと併用する(ぼかし処理が周辺画素を参照している)
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

画像を縮小するお話

2,438 views

Published on

北海道MovableType勉強会の20分枠で使ったスライドです。

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,438
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

画像を縮小するお話

  1. 1. 画像を縮小するお話 2011/08/20 @techno_neko
  2. 2. 自己紹介所属:Hokkaido.pmTwitterID:@techno_neko職種:組み込み系
  3. 3. 画像縮小とは・ 一番身近な画像処理・ サムネイル作成とか・ プラグインだと・・・?
  4. 4. プラグインだと・・・?アップロードした画像のサムネイルを並べて表示して、スライドショーしたり・・・
  5. 5. プラグインだと・・・?アップロードした画像のサムネイルを並べて表示して、スライドショーしたり・・・オンラインフォトアルバムとか!
  6. 6. PhotoShop の場合 いろんな方式があるよ!
  7. 7. いろんな方式・ ニアレストネイバー・ バイリニア・ バイキュービック・ etc...
  8. 8. ニアレストネイバー・ 単純なので高速・ ジャギーが目立つ・ あまり見かけないかも(ブラウザ等でたまに見かける程度)
  9. 9. ニアレストネイバー8x8 の画像を 4x5 に縮小する× 印の位置をサンプリングする こんな感じ
  10. 10. バイリニア・ 線形補間を行う・ 使うなら 50% くらいまで・ バイキュービックがないなら これを使う
  11. 11. バイリニア周辺 4 画素を線形補間する 1 3P1 P2 (1) P1 と P2 を 1:3 で補間 3 (2) P3 と P4 を 1:3 で補間 (3) (1) と (2) を 3:1 で補間 1P3 P4
  12. 12. バイキュービック・ たくさん計算する・ 25% くらいまで使える・ PhotoShop の画像解像度で 最初に選択されている
  13. 13. バイキュービック周辺の画素をたくさん参照する ちょっと難しい
  14. 14. やってみる (1)ニアレストネイバーの実演use strict;use warnings;use Imager;my $img_src = Imager->new( file=>$ARGV[0] ) or die Imager->errstr();my $img_dst = Imager->new( xsize=>$ARGV[1], ysize=>$ARGV[2] ) or die Imager->errstr();my $xmax = $img_src->getwidth() - 1;my $ymax = $img_src->getheight() - 1; 30 行くらいfor my $y (0..$img_dst->getheight()-1) { my $y2 = int( (($y / ($img_dst->getheight() - 1)) * $ymax) + 0.5 ); my @colors = $img_src->getscanline( y=>$y2 ); my @pixels = (); for my $x (0..$img_dst->getwidth()-1) { my $x2 = int( (($x / ($img_dst->getwidth() - 1)) * $xmax) + 0.5 ); push @pixels, $colors[$x2]->rgba(); #print "x = $x, y = $y, x2 = $x2, y2 = $y2n"; } $img_dst->setscanline( y=>$y, pixels=>pack(C*, @pixels) );}$img_dst->write( file=>result.png, type=>png ) or die "Cannot write: ",$img_dst->errstr;__END__
  15. 15. やってみる (2)Imager と PhotoShop の比較use strict;use warnings;use Imager;my $img = Imager->new( file=>$ARGV[0] ) or die Imager->errstr();$img = $img->scale( xpixels=>$ARGV[1], ypixels=>$ARGV[2], type=>nonprop, qtype=>mixing );$img->write( file=>result2.png, type=>png ) or die "Cannot write: ",$img->errstr;__END__ 14 行くらい
  16. 16. やってみる (3)ボケボケの絵を、ニアレストネイバーで縮小すると?
  17. 17. まとめバイキュービックでも、こんな風にサンプリングすると汚くなる
  18. 18. まとめきれいに縮小するには?・ 周辺画素を贅沢に参照する・ フィルターと併用する(ぼかし処理が周辺画素を参照している)
  19. 19. ご清聴ありがとうございました。

×