jsを使い、画像をマグカップの表面に張り付いているように見せたい

###前提・実現したいこと
アップロードした画像をマグカップのような筒状のものに張り付いているように見せたい。（奥行きを表現したい）

このようなイラストをアップロードしたら

このようにマグカップに印刷されているように見せることが目的です。

(画像はsociety6.comより引用)

様々なイラスト画像をアップロードし、同じマグカップの画像にそれぞれ貼り付け、マグカップのプレビュー画像を並べることを目的としています。
アップロードするイラスト画像は数が多いため、一つひとつphotoshopで編集することは除外して考えています。あくまでweb上で完結させたいと考えています。
###現状
三つの画像を重ねて表現しようと考えています。三つの画像は以下
影やハイライトなどの画像（←mix-blend-modeで表現）
↑張り付いているように見せたいイラスト画像
↑マグカップの画像
の順番で画像を重ねています。マグカップの画像が一番下で、ハイライトなどの画像を一番上に乗せています。

問題と質問させていただきたいことは、マグカップに印刷されているようにイラスト画像を湾曲させる方法です。
どうぞよろしくお願いいたします。

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

回答3件

ベストアンサー

説明悪くてスミマセン。もっとざっくり言うと画像を円筒に転写すればいいのではないかと
円筒の1/4だけしか考えてないですが。
参考になるかわからないですが、こんなのも作ってました。
http://www.make-it.co.jp
（投稿場所間違えました。削除の方法わかりませんでしたのですいませんがそのままにします）

投稿2016/05/23 23:48

編集2016/05/23 23:51

pochi0701

総合スコア210

退会済みユーザー

2016/05/24 12:29

お返事本当にありがとうございます！！非常にわかりやすいイラストで感動しています。なるほどですね。しかし理解はできてもそれをコードで表現するには非常に遠い道のりですね...がんばります....w

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

多分というか予想でかつ方向性が違っていてすいません。
まずイメージからX,YのRGB値を取れるとします。
マグカップの中心から左側1/4円にイメージを貼り付けるとすると
マグカップの円筒の半径をRとしたときに、
rr = rr sinθsinθ+rr conθcosθで、その時のθ＝0からの円周上の距離は
2πr(θ/2π)となると思います。
よってx座標を0からrまで変化させた時にθの値が求まりますから、これをθ’として
画像の2πr*(θ'/2π)のピクセルを貼り付ければよいかと
xをスイープさせると抜けが出ないですからね。
見た感じハイライト画像は、元画像を平均すれば出来そうなので、
(ハイライト画像係数1+元画像係数2)/(係数1+係数2)
などという感じで、合成すればいいんじゃないですかね。
canvasでやるなら上から透過pngを重ねてもハイライトは出来ると思います。
やろうとしている方向とは違うと思いますが、リアルタイムにやれると
楽しそうなので。