delicious! newsing! buzzurlにブックマーク! Yahoo!ブックマーク ライブドア - この記事をクリップ! このエントリーを含むはてなブックマーク

php + GD :: jpg画像を半透明DVDパッケージのpng画像に合成する

2009/8/13 (Thu) at 2:34 pm

エントリのアイコン

deviantARTに半透明クリアのDVDパッケージのPSD画像てのがあって、manichoさんという方がつくったもんで、こりゃきれいだなーと思いました。PSDをダウンロードできます。レイヤーがわかれているのでPhotoshopで好きな画像に差し替えて遊べます。


DVD Plastic Case - PSD file

これをPhotoshopでやるんでなくGDでやればパパッとできるなと思ってコードを書いてみました。この作品のダウンロード数はすごい数字なので既にだれかがやってる気がしますが、勉強がてらやってみようかなと。

以下のふたつの画像を合成して↓

これはpng
DVD半透明画像
これはjpg
サンプルjpg画像

こうなっちゃうというもんです↓

pngで出力
結果png画像

コードはこちら↓

generatePng()という関数に渡す引数は5つ。2つは要指定。3つは指定しなくてもよい。元となる2つの画像は、半透明の方はpngで、中に入れる画像はjpgっちゅうのがキメです。

$jpg (必ず指定する)
jpg画像へのパス。大きさはなんでもいいが、350 x 500に縮小される仕様なので、それより小さいとへんなアキができちゃう。タテヨコ比は強制的に350:500になる。

$pkg (必ず指定する)
半透明パッケージのpng画像へのパス。上のリンク先からダウンロードしたpsdから必要なレイヤーだけを取り出して440 x 550に縮小したもの。コレです → pkg.png (58kb)

$dist (optional)
合成されたpngファイルの保存先パス。無指定だと画像出力のヘッダがついてpng画像として出力します。$distを指定するとヘッダ出力せず、pngファイルを保存します。

$w (optional)
$jpgのwidth。無指定だとgetImageSize関数で取得します。

$h (optional)
$jpgのheight。無指定だとgetImageSize関数で取得します。

使い方サンプル。こんなかんじでやるとcreated.pngというファイルができます↓

$jpg = './mypic.jpg';
$pkg = './pkg.png';
$dist = './created.png';
generatePng($jpg, $pkg, $dist);

出力されるpngは常に440 x 550の大きさです。使用する目的に合わせてスクリプトを改変してください。

注意点。

GDでpngを出力するとバージョンの関係からか背景がキレイに透明にならないとかうまくできないことがあります。うちの環境は以下です。

PHP Version 5.2.10
GD Version bundled (2.0.34 compatible)

ver.違いで、きれいに出力されないとかあるかもです。だめな人は自分でジタバタしてください。それにしてもGDの関数って意味不明のヤツが多い!imageAlphaBlendingとか、imageSaveAlphaとか、説明を読んでもよくわからない。どこかにわかりやすいチュートリアルはないですかね。ご存知の方はご教授下さい。

さて、これで画像合成できたわけですが、ここまでできたらこんどはamazonのapiと組み合わせて使いたくなりませんか。それでまぁつくってみたのがコレです↓

と紹介したいオンラインツールがあるんですが、これってamazonの規約に反するのかどうかよくわかんないのでまだ非公開にしときます。asinコードを入れると画像を取得してこのスクリプトを通した結果を返すというもんで、なかなか便利でおもしろいんですが... 。いつか公開するかもしれません。

delicious! newsing! buzzurlにブックマーク! Yahoo!ブックマーク ライブドア - この記事をクリップ! このエントリーを含むはてなブックマーク

コメント・プリーズ!

お名前 (your name)
(required)
url
(optional) ※公開されます。
メールアドレス (email)
(optional) ※公開されません。管理者にだけわかります。
コメント (comment)
(required)

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『&lt;』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

one-px-ffffff-tl one-px-ffffff-tr one-px-ffffff-bl one-px-ffffff-br

PROFILEcaption

藤居ヒロヤ。ウェブデザイナー/ウェブディレクター。ウェブデザインオフィス、3OT NET主宰。名古屋市中区。「優しいデザイン」「激しいデザイン」「正しいデザイン」「セクシーなデザイン」「泣けるデザイン」「もっともなデザイン」... 。あなただけのウェブデザインを丹精込めておつくり致します。見積り依頼等、お気軽にお問い合わせ下さい。

お問い合わせフォーム

RECENT ENTRIEScaption

RECENT COMMENTScaption

TOOLScaption

BOOKMARKScaption

RESOURCEScaption

ARCHIVEcaption