画像上にユーザーがテキストを自由に入力できるようにしたい

Question

前提・実現したいこと

Ruby on Railsを使ってサービスを開発しています。
Instagramのストーリーズや、Facebookのプロフィール画像のように、ユーザーが画像を選択した時に、その画像の自由な位置にテキストラベルを配置し、ラベルにテキストを自由に入力した上で、投稿できるようにしたいです。

実現のために実装すべき機能は以下のように分けて考えております。

1. 選択した画像の上に、テキストラベルを配置できる。
2. テキストラベルの位置・大きさを自由に操作できる。
3. テキストの色・大きさを選択できる。
4. テキストと画像を合成した、新たな画像ファイルがサーバーに送信される。

しかしながら、そもそも最初のステップをどう実装していけば良いかわからず、悩んでいます。

もしもwebアプリで実現することが難しそうならば、swiftでは可能なのか、などもお伺いしたいです。

漠然とした質問で恐縮ですが、よろしくお願いいたします。

試したこと

railsの画像処理ライブラいRmagickが使えそうかと思ったのですが、ドンピシャの機能が見つかりませんでした。

Answer 1

JavascriptでCanvasを使って画像と文字の合成をすませ
Blobオブジェクトをサーバーに送信するのが良さそうです。

Comments

[tacro]

ご回答ありがとうございます。
質問が曖昧で申し訳ありません、そもそも画像内への自由度の高いテキスト入力をどのようにして行えばいいかが判然としておりません。もしご存知であれば、アドバイスいただきたいです。

[tekka]

例えばの話ですが、画像をcanvasに描画し、テキスト入力範囲の四角形をその上に描画、適当なinputタグを用意して入力内容を先の四角形の中に描画すれば出来ませんか？

[tacro]

なるほど、基本的にはそれでできそうですが、四角形そのものをテキスト入力エリアにすることは難しいのでしょうか？

[tekka]

まずは上記が出来てから、四角形エリアをクリックされたらinputタグにフォーカスする、inputタグを不可視にする、など実装すれば、出来そうと思います。テキスト入力エリアそのものズバリは用意されていないので、自分で実装するしかないかと思いますよ。