はじめに
指定した画像の上にスタンプのせるサービスあるじゃないですか
勉強になるかと思ったので似たようなものを作ってみました
どんなやつ
url
https://babu-ch.github.io/gurasan_stamp/
source
https://github.com/babu-ch/gurasan_stamp
使っている技術
Vue.js, JavaScript, Canvas
サーバーはGithubPagesを使用
仕様
画像をアップロード
↓
アプロドされた画像を表示
↓
アイコンをすきなとこに動かす
↓
合成した画像を出力
画像出力部分は
DOMを動かして最終的にCanvasでそれを再現するような仕様になっている
詰まったところ
canvasのrotateがちょっと難しかった
参考
https://weblike-curtaincall.ssl-lolipop.jp/blog/?p=594
こめんと
iphoneとか古いブラウザでは動かないかもしれない
あとめっちゃ使いづらいしサングラスのアイコンとか透けとるやないかい
サンタの帽子もフチが透けとるやないかい
おわりに
GithubPagesすげえ！
GithubPagesがあれば簡単なwebサービスはタダでサクサクつくれますね