自分の画像の上に福笑いのように用意した写真を置くアプリを作りたい

Question

Monaca初心者、さわり始めたばかりです。どのように形にすれば良いかさっぱりわからないので質問させていただきます。

タイトルの通り、ユーザーのカメラアプリにアクセスして写真を撮影後、こちらで用意した画像を撮影した写真に重ねたりするアプリを作りたいと思っています。（ヘアスタイルをシミュレーションしたり、アクセサリーを試すアプリなどが近い）

htmlとcss、Javascriptはわかるので、普通のウェブサイトは作成できます。

どうしたらいいのか、何でも良いのでヒントをいただけないでしょうか？
よろしくお願いします！

※Monacaを使ってアプリを作りたいと思っています。

追記（3月3日）
自分で方法を考えてみました。
１.　カメラで写真を撮る（MonacaサンプルアプリのHello World）
２.　撮った画像の上にjqueryを使いドラッグ＆ドロップで動かせる画像を置く
手順としてはこれなのかなぁという感じで、今作り始めてます。
他にもヒントをいただければありがたいです。

Answer 1

jQueryなのであれば、jQueryUIのdraggableを使えば実装できるかもしれません。
参考: http://mugen00.moo.jp/web/jquery/d-and-d

重ねた要素を画像として保存させるためには、canvasをうまく使えば可能です。
ライブラリを利用する場合はhtml2canvasなどがあります。
参考: https://techblog.kayac.com/html2canvas

Comments

[Onyva2019]

draggable、まさに使おうと思っていたところです。canvasについてもアドバイスありがとうございます。こちらは詳しくないのでこれから勉強したいと思います。

Answer 2

まずは Monaca Docs を読んでください。

初心者は「Monaca を学ぶ」や「チュートリアル」からはじめて、基礎が理解できたら「サンプルアプリ」を見てみるのが良いかと思います。

Comments

[Onyva2019]

サンプルアプリから部分的に使えそうなものを見つけました。ありがとうございます。