8時間弱でcanvasとphpで画像ジェネレーターを作ってみた。

参考としたのは、以下のサイトです。

利用したもの

・create.js

どうやらcanvasを利用するようです。名前だけはちょくちょく聞いていましたが、PHPだけだと処理に時間がかかるようなので、canvasを利用しています。

create.jsとは何ぞやというと、canvasを簡潔に利用するために使うプラグイン的なイメージです。

CreateJSは、HTML5でリッチコンテンツを制作するためのJavaScriptライブラリのスイート(特定用途のソフトウェアを詰め合わせたパッケージ)です。Flashデベロッパーとして著名なGrant Skinner氏(gskinner.com)が開発を行っており、MITライセンスのオープンソースソフトウェアとして商用でも無償で利用できます。

create,jsの中には、TweenJSなどいくつかのライブラリが含まれているようですが、アニメーション等がある訳でもないので、今回は
EaselJSのみの使用で問題ありません。

bootstrap

おなじみの人も多いかと思いますが超有名cssフレームワークです。
多くのコンポーネントを含んでいたり参考サイトが多く混在するため、
初心者でも取り組みやすく、爆速でマシなデザインのサイトが創れるようになります。
一方で、高機能過ぎるが故に、時には余計な機能も含まれてしまうので普段の制作では全く使用しませんが、
今回はプログラミングの方に時間を割いたために、やむなく利用しました。

以下のサイトなどで、ブラウザ上で簡単に構成できるサイトもあります。とてもオススメです。

おおまかな流れ

サーバー内に用意したベースとなる画像をプリロード。canvas内のステージに入れ、inputで入力されたテキストとを融合させ再描画。それをtoDataURL関数で変換しダウンロード出来るようにする。というざっくりした流れ。

canvasでの文字の入力方法等は以下を参考に。

canvasを画像に変換するまでの流れは以下を参考に。

 

そんな感じで完成したのがこちら。
ドヤ顔ジェネレーター

完成品が身内ネタ過ぎるので、しばらくしたら削除して、マトモなジェネレーターをつくりたいと思います。