Flashで別ドメイン(クロスドメイン)にある画像の表示方法(AS3.0)
Flashでは別ドメインにある画像を取得し反映するには制約があります。今回、この回避方法を以下の場合分けをして書いていきたいと思います。ローカル上では動作を確認できたのにサーバへアップしたら反映を確認できない場合は、2か3の方法を試してみると良いかもしれません。
- 取得した画像をそのまま表示する場合
- 取得した画像を加工する場合 – 画像のサーバへポリシーファイルの配置が可能な場合
- 取得した画像を加工する場合 – 画像のサーバへポリシーファイルの配置が不可能な場合
URLRequestでそのまま表示することができます。
package{ import flash.display.*; import flash.net.*; public class main extends MovieClip { public function main():void { var image:String = "画像のURL"; var loader:Loader = new Loader(); loader.load( new URLRequest( image ) ); addChild( loader ); } } }
ポリシーファイル(crossdomain.xml)を用意し、対象となるドメインのルートディレクトリ(例:http://www.example.com/crossdomain.xml)へアップすることで、1のような記述で画像の加工が可能となります。(ポリシーの設定によっては動作しない場合があります。下段を参考にしてください)
ルートディレクトリへポリシーファイルをアップできない場合は、任意のディレクトリへアップしFlash側で以下の指定をすることで対応ができます。
System.security.loadPolicyFile("crossdomain.xmlのパス");
ポリシーファイルcrossdomain.xmlの内容と設定方法:
<?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <site-control permitted-cross-domain-policies="メタポリシーの設定" /> <allow-access-from domain="読み込み側のドメイン" /> </cross-domain-policy>
メタポリシーの設定の記述について:
記述方法 | 説明 |
all | すべてのポリシーファイルを許可する |
master-only | マスターポリシーファイルのみ許可する |
by-content-type | Content-Typeがtext/x-cross-domain-policyのすべてのポリシーファイルを許可する |
by-ftp-filename | FTPサーバのみ使用可能にする |
none-this-response | HTTP応答ヘッダのみ許可する |
none | 許可をしない |
読み込み側ドメインの記述について:
指定方法 | 例 |
完全なドメイン名 | www.example.co.jp |
IP アドレス | 127.0.0.1 |
ワイルドカードを使用したドメイン名 | *.example.co.jp(サブドメインなど) |
完全なワイルドカード | * (アスタリスク)。すべてのドメイン、IP アドレスからのアクセスを許可 |
crossdomain.xmlに関して、以下のポストが参考になります
http://yoshiweb.net/blog/?itemid=162
読み込み先にポリシーファイル(crossdomain.xml)の設置が不可能な場合、サーバサイドスクリプトを経由して画像の取得を行います。
下記のスクリプトを任意の場所へアップします。”file”の部分はFlash側からのクエリのキー値になります。
サーバサイドスクリプト(php)のソース:
<?php if( $_GET[ "file" ] ) { header( "Content-Type:image/jpeg;" ); readfile( $_GET[ "file" ] ); } ?>
ただ、php部分のmimeTypeが”jpeg”と決め打ちとなってしまっているのが気になるので、どこかで対応したいと思います。
[追記] mimeTypeの判別付きスクリプトはこちらに記述しました。
次にポリシーファイルをアップします。ポリシーファイルのアップ先などについては、2の項目を参照してください。
次にFlash側です。画像URLの指定を以下を参考にphpのURLの後、クエリとして読み込みたい画像のURLを記述します。その他の部分は1のような記述で画像の加工が可能となります。
http://www.example.com/hoge.php?file=画像のURL