ArtCanvas.js 2.0 のリリース

描画に必要な機能の実装がおおよそ完了したので, これをバージョン 2.0としてリリースします.

  • レイヤー
  • ペン, 図形, テキストの描画
  • Undo / Redo / レイヤーのクリア
  • カラー
  • ライン (線幅, ラインキャップ, ラインジョイン)
  • 変形
  • エキスポート

少々挙動がおかしい機能もありますが, 以上のような機能が実装されています (バグは今後のバージョンアップで修正していきます).

Ajaxによるファイルアップロード

XMLHttpRequest Level 2が実装されるまでは, ファイルのアップロードは, formタグを利用して, Content-Typeをmultipart/form-dataでPOSTしなければなりませんでした.

XMLHttpRequest Level 2を利用すれば, multipart/form-dataによるPOST, つまり, Ajaxによるファイルアップロードも可能になります.

ポイントは, XMLHttpRequestインスタンスのsendメソッドの引数にFormDataインスタンスを指定することです. FormDataのコンストラクタにはHTMLFormElementのインスタンスを指定します.

FormDataはappendメソッドを利用することで, 動的にPOSTするデータを追加することも可能です. また, POSTするデータにファイルが含まれていれば, 自動的にmultipart/form-dataとして送信してくれます (サンプルコードでは, formタグのenctype属性にmultipart/form-dataを指定していますが…).

参考 : XMLHttpRequest2 に関する新しいヒント

PhantomJSインストール (Mac OS X)

brewでインストールする場合

$ brew install phantomjs

バイナリからインストールする場合

  1. PhantomJSのサイトからzipファイルをダウンロードします
  2. バイナリファイル (bin/phantomjs) を /usr/local/bin/ におきます

インストールを確認してみる

hello.js

console.log('Hello !!');
phantom.exit();
$ phantomjs hello.js
Hello !!