Fork
0
Fav
0
View
1830
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 223 lines
  • HTML 62 lines
  • CSS 47 lines

Create.js を用いて、"写真アルバム作成ツール" っぽいものを作ってみました。 大きな画面推奨です。

使い方

写真のインポート

  • 「Drop image (s)」をクリックします。
  • 表示されたダイアログの「Drop image(s) here.」にローカルの写真を drop します。
  • メイン画面の canvas 領域に写真が置かれます。
    • 写真は縮小されて右上に置かれます。
    • 複数枚同時の場合、右から左に並びます。
    • ※ 8枚以上同時インポートすると、canvas の外に出てしまい、触れなくなります。

写真の移動

  • インポートされた写真は、移動することができます。
    • マウスを写真に置くと、対象の写真が大きくなります。
    • 大きくなった状態で drag して、写真を移動します。

ダウンロード

  • 「Download」を押すことで、別画面に Canvas 画像を表示します。
  • 後は、それを保存してください。

備考

  • 大きな画像をインポートすると、ブラウザが可哀想なことになるので注意!!

  • Canvas サイズは初期表示時に決定します。

    • 大きい画面が欲しい場合は、それなりに大きいウィンドウを使用してください。
  • Canvas 内の写真幅は " ( Canvas 幅 ) / 8 " で固定しています。

    • 写真の高さは、元の写真サイズに応じて縮小した値です。
  • 「Drop image(s)」で drop する際、ファイルタイプのチェックをしていません。

    • 画像ファイル以外を読み込んだ場合の動作は未確認です。
  • Create.js のバージョンは「2013.12.12」

    • jsdo.it に保管されているものを使用せず、HTML 側で読み込んでいます。

今後、こんなこと実装したら面白そう

  • 写真のフィルタリング

    • Create.js に入っている様々なフィルタリングを入れる。
    • 処理重くなりそうだけど。
  • 写真の回転とか、歪めたりとか。

    • サイズの変更も。
  • 背景

    • 現状は白一色。
    • 色変えたり、適当な Bitmap 張ったり。
  • 写真アルバム作成ツールっぽいの
  • bootstrap.js 3.0.0
  • Underscore.js v1.4.4
  • jQuery v2.0.3
  • 写真アルバム作成ツールっぽいの
  • bootstrap.css 3.0.0

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

kazuki_nagasawa

Author

Three.js や Processing.js など、描画系のライブラリで遊んでます。 色々描けるようになりたいにゃ~。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags