ブラウザで画像を加工できるようにしたい。

たまに見かける、ブラウザから画像をアップしてその画像をモザイクかけたり文字を書いたり等の加工できるサービスがあるのですが、これと同じようなものを作ってみたいのですが、何を使って開発しているのでしょうか？

行動規範の内容に同意します

回答3件

画像加工はPHPでも出来ますが、画像を加工するサービスとなると、PHPではUI的な問題が発生します。

あくまでPHPはページにリクエストが送られて来たらそれをサーバー側で処理する物で、
簡単に言うとコンソールアプリケーションの様な物です。

PHPではGUIは表現出来ません。

PHPは単に出力するだけなのでサービス化するのは難しいでしょう。

よくある画像加工サービスは主にJavaScriptを使って実装されています。

「JavaScript Canvas」や「JavaScript 描画」で検索すると情報は出てきます。

JavaScriptにはPHPに無いUI操作が出来ます。
HTMLを直接動的にいじってページ移動なしに何でも出来る様になります。

JavaScript自体にも画像を加工する機能はあるのでJavaScriptの方で質問してください。

投稿2015/06/06 06:44

fukumi822

総合スコア228

ベストアンサー

私の得意な分野ではないため、具体的なコードは例示できませんが…

ブラウザ上で画像加工する方法として、Canvas APIを使用するという方法があります。
Canvas APIはJavaScriptで動作するので、サーバと通信せず、ブラウザ上で画像編集が可能です。

ただし、Canvas APIは描画のための基本的なメソッド(線や図形の描画、ピクセルの色の取得、画像の読み込みと出力など)しか用意されていません。
このため、画像をぼかしたりモザイクをかけるなどの複雑な処理はJavaScriptで記述しなくてはなりません。
また当然ながら、画像編集を行うブラウザのバージョンや、動作しているPCのスペックにも左右されます。

ブラウザの動作環境に左右される点や処理を自分で記述する必要性があることから、どちらかと言えばサーバサイドでの画像加工(PHPなど)が適切でしょう。
ただしその場合、編集を行う度にサーバとの通信が発生してしまいます。このため、サーバサイドでの画像加工を採用したサービスは機能を限定したものか、あるいはとても扱いづらいものになってしまいます。

投稿2015/06/04 16:02

編集2015/06/04 16:08