画像処理についてあれこれ: 2008-05-04

Saturday, May 10, 2008

ImageMagickとPHPで、２つの画像を連結する

Imagickを使用して２つの画像を連結するには、以下のコードを実行します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<title>sample384</title>
</head>
<body>
<?php
/* 縦方向に画像の連結 */
$im = new Imagick('sample3b.jpg');
$im2 = new Imagick('sample4.jpg');
$im->addImage($im2);
$im->setImageIndex(0);
$im3=$im->appendImages(true);
$im3->writeImage('sample384a.png');
/* $im3->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im3->destroy();
/* $im2->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im2->destroy();
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
/* 横方向に画像の連結 */
$im = new Imagick('sample3b.jpg');
$im2 = new Imagick('sample4.jpg');
$im->addImage($im2);
$im->setImageIndex(0);
$im3=$im->appendImages(false);
$im3->writeImage('sample384b.png');
/* $im3->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im3->destroy();
/* $im2->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im2->destroy();
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
?>
<img src="sample384a.png" />
<img src="sample384b.png" />
</body>
</html>

上記のコードでは、addImageメソッドでイメージを追加して、カレントのイメージインデックスを０に設定してからappendImagesメソッドで画像を連結しています。

元画像１(sample3b.jpg)

元画像２(sample4.jpg)

縦に連結した画像(sample384a.png)

横に連結した画像(sample384b.png)

環境
Apache 2.2.8/PHP5.2.5/ImageMagick6.4.0

関連項目
WindowsでImageMagickをPHPから使用するための設定 (Imagickの設定)

ImageMagickとPHPで、画像サイズを変更する

Imagickで画像サイズを変更するには、以下のコードを実行します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<title>sample383</title>
</head>
<body>
<?php
/* リサイズ */
$im = new Imagick('sf.jpg');
/* 2008/11/25追記比率を保ってリサイズするには、基準となる軸以外に０を指定する
(誤)$im->resizeImage(100, 100, imagick::FILTER_MITCHELL, 1);
*/
$im->resizeImage(100, 0, imagick::FILTER_MITCHELL, 1);
$im->writeImage('sample383a.png');
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
/* アスペクト比を無視してリサイズ */
$im = new Imagick('sf.jpg');
$im->resizeImage(200, 100, imagick::FILTER_MITCHELL, 1, false);
$im->writeImage('sample383b.png');
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
?>
<img src="sample383a.png" />
<img src="sample383b.png" />
</body>
</html>

元画像(sf.jpg)

出力画像１(sample383a.png)

出力画像２(sample383b.png)

関連項目
ImageMagickでアスペクト比を無視して大きさを変更する　(Convertコマンド)
ImageMagickとPHPで、バンド状グラデーションを描画する (FILTER_POINTを使用してのリサイズ)
ImageMagickとPHPで、画像を荒いドット画像に変換する (FILTER_POINTを使用してのリサイズ)

Friday, May 09, 2008

ImageMagickとPHPで、画像の２値化を行う

Imagickで画像の２値化を行うには、以下のコードを実行します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<title>sample381</title>
</head>
<body>
<?php
/* ２値化 */
$im = new Imagick('sf.jpg');
$im->blackThresholdImage('#808080');
$im->whiteThresholdImage('#808080');
$im->writeImage('sample382a.png');
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
?>
<img src="sample382a.png" />
</body>
</html>

上記の例ではblackThresholdImageメソッドとwhiteThresholdImageメソッドを使用して画像を２値化しています。

元画像(sf.jpg)

出力画像(sample382a.png)

環境
Apache 2.2.8/PHP5.2.5/ImageMagick6.4.0

関連項目
WindowsでImageMagickをPHPから使用するための設定 (Imagickの設定)

Thursday, May 08, 2008

ImageMagickとPHPで、グラデーションの四角・角丸四角を描画する

Imagickでグラデーションの四角・角丸四角を描画するには、以下のコードを実行します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<title>sample381</title>
</head>
<body>
<?php
/* グラデーション */
$im = new Imagick();
$im->newPseudoImage(200, 200, 'gradient:#bbddff-#ffffff');
$im->writeImage('sample381a.png');
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();

/* 角丸グラデーション */
$im = new Imagick();
$im->newPseudoImage(200, 200, 'gradient:#cceeff-#6699dd');
$im->roundCorners(20,20);
$im->writeImage('sample381b.png');
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
?>

<img src="sample381a.png" />
<img src="sample381b.png" />
</body>
</html>

Imagick::newPseudoImageメソッドで、指定の２色のグラデーションのイメージを生成することができます。

出力画像(sample381a.png)

出力画像(sample381b.png)

環境
Apache 2.2.8/PHP5.2.5/ImageMagick6.4.0

関連項目
WindowsでImageMagickをPHPから使用するための設定 (Imagickの設定)
ImageMagickで角丸グラデーションの四角を描画する (Convertコマンド)

Wednesday, May 07, 2008

ImageMagickとPHPで、画像を丸く切り取る

Imagickで画像を丸く切り取るには、以下のコードを実行します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<title>sample380</title>
</head>
<body>
<?php
$im = new Imagick('sf.jpg');
$width = $im->getImageWidth();
/* 読み込んだイメージと同じ大きさのマスク用画像を作成 */
$height = $im->getImageHeight();
$mask = new Imagick();
$mask->newImage($width, $height, 'none', 'png');
/* 画像の大きさと同じ円を描画 */
$idraw = new ImagickDraw();
$idraw->setFillColor("#FFFFFF");
$idraw->ellipse($width/2, $height/2, $width/2-1, $height/2-1, 0, 360);
$mask->drawImage($idraw);
/* マスク画像を使用して画像を切り取り */
$mask->compositeImage($im, Imagick::COMPOSITE_IN, 0, 0, Imagick::CHANNEL_ALL);
$mask->writeImage('sample380a.png');

/* cleanup */
/* $idraw->clear(); 2008/09/30追記：destroyと同様にClearDrawingWandを呼ぶので必要なし */
$idraw->destroy();
/* $mask->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$mask->destroy();
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
?>

<img src="sample380a.png" />
</body>
</html>

元画像(sf.jpg)

出力画像(sample380a.png)

環境
Apache 2.2.8/PHP5.2.5/ImageMagick6.4.0

Tuesday, May 06, 2008

ImageMagickで、文字列の影に横線をいれる

文字列の影に横線をいれるには、以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.4.0-Q16
%im%\convert.exe -size 200x50 xc:none -gravity center -font Tahoma -pointsize 30 -fill #707070 -annotate 0 "ImageMagick" ( +clone -background #000000 -shadow 70x3+5+5 -fx "j%%2>0?p:#FFFFFF" ) +swap -background white -mosaic sample378.png

上記バッチファイルでは、以下の処理を実行しています。
1. 横200ピクセルx縦50ピクセルの透明なイメージを作成し、Tahomaフォント・30ポイント、描画色#707070で文字列ImageMagickを描画。
2. 処理1の画像を複製し、影の色#000000で影を生成し、偶数ラインを#FFFFFFの色にします。
3. 処理1と処理2の画像を入れ替え、背景色白で重ね合わせます。

出力画像(sample378.png)

Sunday, May 04, 2008

ImageMagickで、２つの画像が交互にスクロールするアニメーションGIFを作成する

２つの画像が交互にスクロールするアニメーションGIFを作成するには、以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.4.0-Q16

%im%\convert.exe sample3b.jpg -enhance f0.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+10 +repage -enhance f1.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+20 +repage -enhance f2.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+30 +repage -enhance f3.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+40 +repage -enhance f4.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+50 +repage -enhance f5.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+60 +repage -enhance f6.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+70 +repage -enhance f7.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+80 +repage -enhance f8.png
%im%\convert.exe sample3b.jpg sample6.jpg -append -crop 100x100+0+90 +repage -enhance f9.png
%im%\convert.exe sample6.jpg -enhance f10.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+10 +repage -enhance f11.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+20 +repage -enhance f12.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+30 +repage -enhance f13.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+40 +repage -enhance f14.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+50 +repage -enhance f15.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+60 +repage -enhance f16.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+70 +repage -enhance f17.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+80 +repage -enhance f18.png
%im%\convert.exe sample6.jpg sample3b.jpg -append -crop 100x100+0+90 +repage -enhance f19.png

%im%\convert.exe f0.png -coalesce -layers optimize-plus f0.png f0.png f0.png f0.png f1.png f2.png f3.png f4.png f5.png f6.png f7.png f8.png f9.png f10.png f10.png f10.png f10.png f10.png f11.png f12.png f13.png f14.png f15.png f16.png f17.png f18.png f19.png -set delay 20 -loop 0 sample377.gif

上記の例では、2つの画像を垂直方向に連結して(-append)、ずらして切り取り(-chop)をおこなって各フレームを生成してアニメーションGIFを作成しています。また、各フレームでノイズを減らすために-enhanceを使用しています。

元画像１(sample3b.jpg)

元画像2(sample6.jpg)

出力画像(sample377.gif)

ImageMagickとPHPで、画像の上下反転・左右反転をおこなう

画像の上下反転・左右反転をおこなうには、以下のコードを実行します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<title>sample377</title>
</head>
<body>
<?php
/* 上下反転 */
$im = new Imagick('sample3b.jpg');
$im->flipImage();
$im->writeImage('sample377a.jpg');
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
/* 左右反転 */
$im = new Imagick('sample3b.jpg');
$im->flopImage();
$im->writeImage('sample377b.jpg');
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
?>

<img src="sample377a.jpg" />
<img src="sample377b.jpg" />
</body>
</html>

filpImageメソッドで上下反転、flopImageメソッドで左右反転を行います。

元画像(sample3b.jpg)

出力画像1(sample377a.jpg)

出力画像2(sample377b.jpg)

環境
Apache 2.2.8/PHP5.2.5/ImageMagick6.4.0

関連項目
ImageMagickで画像の左右反転を行う (Convertコマンド)
WindowsでImageMagickをPHPから使用するための設定 (Imagick)