画像処理についてあれこれ: 2008-06-08

Saturday, June 14, 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>sample414(ImageMagick6.4.1)</title>
</head>
<body>
<?php
/* 画像の上に半透明の荒いドットの文字列を描画する */
$im = new Imagick('sf2.jpg');

$im2 = new Imagick();
$im2->newImage($im->getImageWidth()/8, $im->getImageHeight()/8, 'none');
$idraw = new ImagickDraw();
$idraw->setFillColor('#bbddffa0');
/* フォント設定 */
$idraw->setFont('Bitstream-Vera-Sans');
/* フォントサイズ設定 */
$idraw->setFontSize(9);
/* gravity設定 */
$idraw->setGravity(Imagick::GRAVITY_CENTER);
/* antialiasをoff*/
$idraw->setStrokeAntialias(false);
/* 文字列描画 */
$idraw->annotation(0, 0, "Magic");
$im2->drawImage($idraw);
/* FILTER_POINTを使用してリサイズ */
$im2->resizeImage($im->getImageWidth(), $im->getImageHeight(), Imagick::FILTER_POINT, 1, false);
/* 画像と重ね合わせ */
$im->compositeImage($im2, Imagick::COMPOSITE_DEFAULT, 0, 0);
$im->writeImage('sample419a.jpg');
/* $idraw->clear(); 2008/09/30追記：destroyと同様にClearDrawingWandを呼ぶので必要なし */
$idraw->destroy();
/* $im2->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im2->destroy();
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();

?>

<img src="sample419a.jpg" />

</body>
</html>

元画像(sf2.jpg)

出力画像(sample419a.jpg)

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

Friday, June 13, 2008

ImageMagickとＰＨＰでドット文字列を描画する

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>sample418(ImageMagick6.4.1)</title>
</head>
<body>
<?php
/* ドット文字列 */
$im = new Imagick();
$im->newImage(45, 12, '#f1ede1');
$idraw = new ImagickDraw();
$idraw->setFillColor('#992210');
/* フォント設定 */
$idraw->setFont('Bitstream-Vera-Sans');
/* フォントサイズ設定 */
$idraw->setFontSize(9);
/* gravity設定 */
$idraw->setGravity(Imagick::GRAVITY_NORTH);
/* antialiasをoff*/
$idraw->setStrokeAntialias(false);
/* 文字列描画 */
$idraw->annotation(0, 0, "M a g i c");
$im->drawImage($idraw);

/* FILTER_POINTを使用してリサイズ */
$im->resizeImage(450, 120, Imagick::FILTER_POINT, 1, false);
$im->writeImage('sample418a.jpg');
/* $idraw->clear(); 2008/09/30追記：destroyと同様にClearDrawingWandを呼ぶので必要なし */
$idraw->destroy();
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
?>

<img src="sample418a.jpg" />

</body>
</html>

出力画像(sample418a.jpg)

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

Thursday, June 12, 2008

ImageMagickで付箋紙を描画する

ImageMagickで付箋紙を描画するには以下のバッチファイルを実行します。

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

%im%\convert.exe -size 200x200 gradient:#f4f070-#e0cc4c -font Comic-Sans-MS-Bold -pointsize 20 -background none -gravity center -annotate 0 "To Do\n4:30 Meeting." -gravity northwest -matte -channel rgba -background none -splice 20x0 -virtual-pixel background -fx "p{i+j^2*0.0005,j}" -shear 0x3 ( -size 200x200 xc:black -background none -splice 20x0 -shear 0x3 -shadow 60x3+3+5 ) ( -size 200x200 xc:white ) -swap 0,2 -mosaic sample416.png

上記バッチファイルでは以下の処理を実行しています。
1. グラデーション背景(gradient:#f4f070-#e0cc4c)に文字列を中央寄せで(-gravity center)描画。
2. 左側に20ピクセルの透明な余白をつけて、-fxで下側を左方向に曲げる。
3. 画像を傾ける(-shear 0x3)。
4. 黒色背景の左側に20ピクセルの透明な余白をつけて、傾けて、影付け。
5. 処理３と処理４と白地の背景を重ね合わせ。

出力画像(sample416.png)

Wednesday, June 11, 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>sample415(ImageMagick6.4.1)</title>
</head>
<body>
<?php
/* 四隅を切り落とす */
$dx=10;
$dy=10;
$im = new Imagick('sf.jpg');
/* 画像の大きさに合わせて四隅が切り取られた形の座標を計算 */
$points = array(
array('x' => $dx, 'y' => 0),
array('x' => 0, 'y' => $dy),
array('x' => 0, 'y' => $im->getImageHeight()-$dy-1),
array('x' => $dx, 'y' => $im->getImageHeight()-1),
array('x' => $im->getImageWidth()-$dx-1, 'y' => $im->getImageHeight()-1),
array('x' => $im->getImageWidth()-1, 'y' => $im->getImageHeight()-$dy-1),
array('x' => $im->getImageWidth()-1, 'y' => $dy),
array('x' => $im->getImageWidth()-$dx-1, 'y' => 0)
);
$im2 = new Imagick();
$im2->newImage($im->getImageWidth(), $im->getImageHeight(), 'none');
$idraw = new ImagickDraw();
$idraw->setFillColor('white');
/* 座標に基づき、ポリゴンを描画 */
$idraw->polygon($points);
$im2->drawImage($idraw);

/* 画像を切り取り */
$im2->compositeImage($im, Imagick::COMPOSITE_IN, 0, 0, Imagick::CHANNEL_ALL);
$im2->writeImage('sample415a.png');

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

?>

<img src="sample415a.png" />

</body>
</html>

元画像(sf.jpg)

出力画像(sample415a.png)

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

関連項目
ImageMagickとPHPで画像を角丸四角に切り取って文字入れする
ImageMagickで画像の四隅を切り取る（Convertコマンドで同様の処理）

Tuesday, June 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>sample414(ImageMagick6.4.1)</title>
</head>
<body>
<?php
/* エッジ抽出 */
$im = new Imagick('sf2.jpg');
$im->edgeImage(1);
$im->writeImage('sample414a.jpg');
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();

?>

<img src="sample414a.jpg" />

</body>
</html>

元画像(sf2.jpg)

出力画像(sample414a.jpg)

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

関連項目
ImageMagickでエッジ抽出を行う　（Convertコマンドによるエッジ抽出）
ImageMagickで透過PNGのエッジ抽出画像を生成する (Convertコマンド)
JMagickで、画像のエッジ抽出をする (JMagickの場合)
ImageMagickとPHPで、画像のエッジ抽出後、任意の色に変換する

Monday, June 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>sample413(ImageMagick6.4.1)</title>
</head>
<body>
<?php
$im = new Imagick('sf2.jpg');
$idraw = new ImagickDraw();
$idraw->setFillColor('#00000080');
/* 四角描画 */
$idraw->rectangle(0,0,$im->getImageWidth(),30);
$idraw->setFillColor('#ffffff');
/* フォント設定 */
$idraw->setFont('Comic-Sans-MS-Bold');
/* フォントサイズ設定 */
$idraw->setFontSize(20);
/* gravity設定 */
$idraw->setGravity(Imagick::GRAVITY_NORTH);
/* 文字列描画 */
$idraw->annotation(0, 0, "San Francisco");
$im->drawImage($idraw);
/* 角丸四角に切り取り */
$im->roundCorners(30, 30);
/* 影つけ */
$im2=$im->clone();
$im2->setImageBackgroundColor('black');
$im2->shadowImage(40,2,3,3);

/* 背景用イメージ */
$im3 = new Imagick();
$im3->newImage($im->getImageWidth(), $im->getImageHeight(), 'white');
$im3->addImage($im2);
$im3->addImage($im);
$im4=$im3->mosaicImages();
$im4->writeImage('sample413a.jpg');

/* $idraw->clear(); 2008/09/30追記：destroyと同様にClearDrawingWandを呼ぶので必要なし */
$idraw->destroy();
/* $im4->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im4->destroy();
/* $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="sample413a.jpg" />

</body>
</html>

元画像(sf2.jpg)

出力画像(sample413a.jpg)

Sunday, June 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>sample412</title>
</head>
<body>
<?php
/* Patternを作成 */
$im = new Imagick('pattern1.gif');
$idraw = new ImagickDraw();
$idraw->pushPattern('tile', 0, 0, $im->getImageWidth(), $im->getImageHeight());
$idraw->composite(Imagick::COMPOSITE_DEFAULT, 0, 0, $im->getImageWidth(), $im->getImageHeight(), $im);
$idraw->popPattern();
/* 作成したパターンを使用する */
$idraw->setFillPatternURL('#tile');
/* フォント設定 */
$idraw->setFont('Tahoma');
/* フォントサイズ設定 */
$idraw->setFontSize(60);
/* gravity設定 */
$idraw->setGravity(Imagick::GRAVITY_CENTER);
/* 文字列描画 */
$idraw->annotation(0, 0, "Sample");
/* 背景用のイメージを作成 */
$im2 = new Imagick();
$im2->newImage(240, 80, '#fadf69');
$im2->drawImage($idraw);
$im2->writeImage('sample412a.jpg');
/* $idraw->clear(); 2008/09/30追記：destroyと同様にClearDrawingWandを呼ぶので必要なし */
$idraw->destroy();
/* $im->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im->destroy();
/* $im2->clear(); 2008/09/30追記：destroyと同様にClearMagicWandを呼ぶので必要なし */
$im2->destroy();

?>

<img src="sample412a.jpg" />

</body>
</html>

パターン画像()

出力画像()

関連項目
ImageMagickで文字列を画像で塗りつぶすには (Convertコマンドによる同様の処理)

画像処理についてあれこれ