Fork
0
Fav
0
View
1556
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 421 lines
  • HTML 21 lines
  • CSS 12 lines
1. FileAPIでローカルファイルを読み込み(input:file ないし ドラッグアンドドロップをトリガーにして発動)
2. readerからimg出力
3. imgをcanvasに変換してdrawImage
4. 画像の短辺を画像表示枠に収まるように縮尺を変更
5. 長辺方向に画像をスライドして表示できるようなイベントを割り当て
6. filterをcanvas上でかけて
7. imgとしてgenerate

というプログラムになります。filterの種類はとりあえず3つだけ用意しました。
filterバリエーションを増やしたり、拡大縮小ボタンをつけたり、Blobをサーバサイドに送信する処理を付け足すとインスタみたいなWEBアプリが作れそうですね。


[WEBサイト]
http://oredon.guitarkouza.net/

[twitter]
https://twitter.com/oredon_taisuke

:::::::::::::::::

[HTML5 で3Dゲーム作りました]
http://is.guitarkouza.net/

:::::::::::::::::

[HTML5 で2Dゲーム作りました]
http://oredon.guitarkouza.net/

:::::::::::::::::
  • DnD+FileAPIで画像をcanvasに表示し、トリムしてフィルタ適用してimgに出力する
  • jQuery v2.1.0
  • DnD+FileAPIで画像をcanvasに表示し、トリムしてフィルタ適用してimgに出力する

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

oredon

Author

得意領域はUIエンハンス系です。 最近はCanvas周りを重点的に学習しています。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags