ダウンロード サンプルファイル (93.8 KB)
前回はImagickのインストール、画像サイズ変換について紹介しました。今回は主に携帯サイトでブラウザ上から文字を入力して指定した画像の上に文字を描いたり、複数の画像を合成して1枚の画像を生成するアプリケーションの構築例を、Imagickの機能と共に説明します。
はじめに
前回はImagickのインストール、画像サイズ変換について紹介しました。
今回は主に携帯サイトでブラウザ上から文字を入力して指定した画像の上に文字を描いたり、複数の画像を合成して1枚の画像を生成するアプリケーションの構築例を、Imagickの機能と共に説明します。
対象読者
PHPでのWEBアプリケーション開発について基本的なことを理解している方を対象とします。
動作環境と開発環境
本連載で紹介するサンプルなどで実行している環境は次のとおりです。
- CentOS 5.3
- Httpd 2.0.61
- PHP 5.3
事前準備
前回説明した画像の読み書き/操作クラスのImagickに加えて、描画用クラスImagickDrawというクラスを利用します。ImagickDrawは、Imagickで読み込んだ画像や生成した画像に線や文字を描画したり、枠をつけたりという加工を行うメソッドを集約したクラスです。
Imagickインストール時にImagickDrawも同時にインストールされますので、インストールに関して特別な作業は必要ありません。Imagickのインストール手順に関しては前回の記事を参照してください。
本記事で紹介するサンプルを実行する際に
今回のサンプルで使用するフォントは、以下のフリーフォント配布サイトからダウンロードしたものを使用しました。各サンプル実行時には各フォントをダウンロード後、sampleフォルダ内のfontフォルダに配置して実行してください。
指定した画像に文字を描く
次のように画像に横と縦に文字を描くサンプルを作成します。
ImagickDrawで日本語文字を扱う場合は、Imagickで呼び出される画像処理ライブラリImageMagickが日本語などのマルチバイト文字を扱う際にUnicodeで処理するように設計されているため、Unicodeの符号化形式の一つとしての文字コードであるUTF-8を使用します。

サンプルのように文字を描く下地となる画像を指定する方法、画像上の任意の位置に文字を描画する方法を説明します。
文字列を描画する下地となるキャンバスを定義する
文字列を描画するキャンバスはImagickで画像を読み込んで定義します。
$im = new Imagick();
// 下地となる画像を読み込む
$im->readImage("images/neko.jpg");
文字列を描画する下地となる画像の属性を変更する
複数の画像を合成したり、画像とImagickDrawクラスで定義したオブジェクト(後述)を合成する場合にはImagickで読み込んだ画像の属性を合成可能に変更する必要があります。
この属性変更はImagickのcoalesceImagesメソッドで行います。
// 複数の画像を合成できるようにプロパティを変更 $canvas = $im->coalesceImages();
この記事は参考になりましたか?
- 目的に応じて適材適所で使うPHPライブラリ連載記事一覧
- この記事の著者
-
山田 祥寛(ヤマダ ヨシヒロ)
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
WINGSプロジェクト 片渕 彼富(カタフチ カノトミ)
<WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか?
この記事をシェア
