adiary開発日誌

Webアプリ開発中に ImageMagick（perlmagick）が SpeedyCGI 環境でまともに動かない不具合に当たりました。

• 問題の詳細
• 問題の症状
• 問題の原因
• 問題の解決法 2014/08/18
• まとめ
• メモ

問題の詳細

• Image::Magick をロードして何かしら処理を行うルーチンを SpeedyCGI で実行する時、２回目以降のキャッシュされた状態で不具合が起こる*1。
• 問題確認環境
  • Perl 5.8.8 + SpeedyCGI 2.22
  • ImageMagick 6.3.7 および 6.5.9

この問題は FastCGI や mod_perl2 では起きません。

問題の症状

スクリプト

#!/usr/bin/speedy

use Image::Magick();

print "Content-Type: text/plain\n\n";
print "Image::Magick Version $Image::Magick::VERSION \n";
my $image = Image::Magick->new;
$image->Read( 'x.png' );

実行結果。

~$ test.pl
Image::Magick Version 6.3.7
~$ test.pl
Segmentation fault

~$ test.pl
Image::Magick Version 6.5.9
~$ test.pl
Segmentation fault

問題の原因

不明。

問題の解決法 2014/08/18

#!/usr/bin/speedy

delete $INC{'Image/Magick.pm'};
require Image::Magick;

print "Content-Type: text/plain\n\n";
print "Image::Magick Version $Image::Magick::VERSION \n";
my $image = Image::Magick->new;
$image->Read( 'x.png' );

requireで毎回確実にロードさせる細工をすることで問題は起こらなくなりました。Image::Magickモジュールがキャッシュされませんが、evalを飛び越えてSpeedyCGIごと落ちるよりはマシということで……。

まとめ

gcc 4.4でも起きたので関係ないようです。4年経っても解決されてないとは思わなかった（汗）

メモ

256色png（8bitカラーパレット）で保存する方法。

$image->Read( 'x.png' );
$image->Resize(width=>133, height=>100);
$image->Quantize(colorspace=>'RGB',colors=>256);
$image->Set(depth => 8); 
$image->Write( 'y.png' );

画像の縦横中央配置

HTMLのソース。余計な改行やスペースを入れないこと。

<div class="image"><span class="dummy"></span><img src="xxx.png" /></div>

CSS。

div.image {
	border:		1px solid #8ff;

	min-width:	320px;
	width:		320px;
	height:		240px;
	_width:		322px;
	_height:	242px;

	text-align:	center;
	display:	block;
}
div.image span.dummy {
	height:		240px;
	width:		0px;
	vertical-align:	middle;
	display:	inline-block;
}
div.image img {
	max-width:	320px;
	max-height:	240px;
	vertical-align:	middle;

	/* IE6 hack */
	_margin-top:	-1px;
	/* IE6 でアスペクト比保存縮小のためのhack */
	_width:		expression(this.height>240 && this.width*3<this.height*4 ? Math.floor(this.width*240/this.height) : (this.width > 320 ? 320: true ));
	_height:	expression(this.height>240 ? 240: true );
}
*:first-child+html div.image img { /* IE7 hack */
	margin-top:	-1px;
}

• 画像領域は320*240。
• モダンブラウザは問題なく表示。
• IE6は後方互換モード、IE7は標準準拠モード+ie8.js。
• "margin-top: -1px;"してあげないと画像がなぜか下に1pxずれてしまう。

「span.dummy」を「display: inline-block」するのが縦方向センタリングのポイントです。

IE6で縦横比保存なmax-width, max-height

img {
	max-width:	320px;
	max-height:	240px;
	_width:		expression(this.height>240 && this.width*3<this.height*4 ? Math.floor(this.width*240/this.height) : (this.width > 320 ? 320: true ));
	_height:	expression(this.height>240 ? 240: true );
}

240と320を好みのサイズに変更してください。