Edited at

クロスオリジンに置いたメディアファイルを取得し使う為の createJS めも

More than 5 years have passed since last update.

createJS バージョン情報

ライブラリ
バージョン

EaselJS
version 0.7.1

TweenJS
version 0.5.1

PreloadJS
version 0.4.1


目的(Goal)

クロスオリジンに置いたメディアファイルを canvas で使う時に CROS エラーになる問題を回避したい. 今回は CreateJS を使用している.


前提条件(Given)


  1. HTML ファイル (ex. http://hoge.com) と CSS/JS/Images ファイル (ex. http://cdn.fuga.com) を別のオリジンサーバに置いている.


  2. メディアファイルを置くの Web サーバ(ex. http://cdn.fuga.com) のレスポンスヘッダには CROS ヘッダを追記している.(下記例参照)


ex. nginx の場合


nginx.conf

## 設定ファイルの一部

http {
server {
listen 80;

location / {
root /usr/share/nginx/html;
index index.html index.htm;

if ($request_method = OPTIONS) {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
add_header Access-Control-Allow-Credentials true;
add_header Content-Length 0;
add_header Content-Type text/plain;
return 200;
}

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
add_header Access-Control-Allow-Credentials true;
}
}
}



解決したい問題その 1: createJS でクロスオリジンの画像取得に失敗する

クロスドメインのエラーになるため, canvas で画像取得及び bitmap 画像描画に失敗する.


解決策

PreloadJS で LoadQueue を初期化する際に第 3 引数に文字列を指定する.

loader = new createjs.LoadQueue(false, '', 'hoghoge')

公式ドキュメントのサンプルは “Anonymous” と明記されていた(*1)が, 任意の文字列であれば問題ない. (空文字列でなければよい.)


結果

全てのブラウザ(IE, chrome, safari, firefox, android ブラウザ)でクロスオリジンの画像取得ができたことを確認した.


解決したい問題その 2: createJS で生成した bitmap 画像にクリックが効かない

android 2.3, iOS5 の Web ブラウザでは, クロスオリジンの画像で生成した bitmap 画像にクリックが効かない.


解決策


  1. 透明のベクターオブジェクトを作り, bitmap 画像の代わりにクリックさせる. (*2)


  2. hitArea メソッドで他のオブジェクトにイベントリスナーを登録できる. (*3)

記述例s

    # 画像インスタンス生成

bitmap = new createjs.Bitmap('CDN_URL/hoge.png')
# ダミーのインスタンス生成
dammy_obj = new createjs.Shape()

# ダミーのオブジェクトサイズを画像と合わせる
dammy_obj.graphics.beginFill('#000000')
dammy_obj.drawRect(0, 0, bitmap.image.width, bitmap.image.height)

# イベントリスナーつける
bitmap.hitArea = dammy_obj

# 画像オブジェクトのみ addChild する
stage.addChild(bitmap)

# 画像オブジェクトにイベントリスナーを登録しておく
bitmap.addEventListener 'mousedown', (e) ->
# 処理
return


結果

このコードを入れて上と同様の対象ブラウザにおいて, 生成した bitmap 画像のクリックが効くようになった.


References

(1) http://www.createjs.com/Docs/PreloadJS/classes/LoadQueue.html

(*2) http://d.hatena.ne.jp/DiegoTristan/20130520/1369031619

(
3) http://www.createjs.com/Docs/EaselJS/classes/ButtonHelper.html