AnimateCCで生成したファイルの画像をbase64化する方法

概要

ゲームの広告だがそのゲームの一部を疑似体験できる、プレイアブルアドという代物を実装することになった。
アプリ上のwebviewで表示されるので、ターゲットブラウザはsafariとchrome。
通常のhtml,css,jsでイケるのだが、複雑なことになると工数かかりそうだなーと思っていたがAdobe AnimateCCという持て余しまくっているツールのことを思い出したので、それで作ってみた。快適快適。
が、とある広告プラットフォームの入稿のフォーマットは単一htmlのみ。
画像のパスをbase64にすれば良いだけの話がいたくハマったので、解決策をここに記す。

間違い

animteCCから書き出されたjsにこんな記載があります。

lib.properties = {
  	id: 'CBE7D0B014C34055B50EB7B1A2F1A211',
  	width: 640,
  	height: 1136,
  	fps: 24,
  	color: "#FFFFFF",
  	opacity: 1.00,
  	manifest: [
  		{src:"images/test_atlas_.png?1551178733007", id:"test_atlas_"}
  	],
  	preloads: []
  };

これだけ見ると、srcの中身をbase64化したものに変えるだけで良いと思うが、全然動きません。
理由は、裏でPreloadJSが動いているから。
animateCCは基本的にCreateJSにおんぶにだっこなので、マニフェスト内の画像はPreloadJSによって事前ロードされます。
なので、base64をhtml内のimgタグに書き、jsでそいつを読み込んであげてanimate内の画像管理部分に紐づけてあげる、までを自前でやる必要があります。

htmlに追記する

html内にimgタグでbase64を書いちゃいましょう。

<img id="test_atlas_" style="display:none" width="2048" height="2048" title="" alt="" src="data:image/png;base64,iVBORw0K...">

canvasの下あたりにimgタグを追加します。display:noneにしておくことを忘れず。
idは、上で紹介したmanifestのidと同じ名前にしましょう。

jsを改造する

animateでエクスポートしたjsに変数を追記

最後のほうで、グローバル変数を定義している部分があるので、createjs, AdobeAn,に続き、「images」を追加します。

})(createjs = createjs||{}, AdobeAn = AdobeAn||{});
var createjs, AdobeAn, images;

htmlのインラインjsでpreloadの記載を修正

init()の上からすぐに見つかると思うので、この5行をコメントアウトします。

// var loader = new createjs.LoadQueue(false);
// loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
// loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
// var lib=comp.getLibrary();
// loader.loadManifest(lib.properties.manifest);

そして、下記を追加します。
images変数を初期化し、htmlにべた書きしたbase64の画像と、manifestのidを紐づけています。

images = images||{};
var manifest = lib.properties.manifest;
for (var i=0, l=manifest.length; i<l; i++) {
  	var id = manifest[i].id;
  	var img = document.getElementById(id);
  	if (img != null) {
  		images[id] = img;
  	}
}
handleComplete(comp);

もうちょい修正

loaderの記述のすぐ下のほうに、handleCompleteという関数があります。
修正前はloaderのcompleteイベントも一緒に渡していたのですが、loader使わないので引数を修正します。

//function handleComplete(evt, comp) {
function handleComplete(comp) {

さらにすぐ下のほう、この一文もいらないのでコメントアウト。

// var queue = evt.target;

最後です。さらにすぐ下のほう。for文でloaderから画像の本体を引っ張ってくる部分を、loaderではなく自前で用意したimagesに置き換えてあげます。

for(i=0; i<ssMetadata.length; i++) {
  	// ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
    ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [images[ssMetadata[i].name]], "frames": ssMetadata[i].frames} )
}

終わり

これで画像をソース内に入れ込むことができました！
cdnから読んでるcreateJSもインラインに含めてしまえば、立派な入稿用単一htmlが完成しました！
プレイアブルアドの実装を考えている方の参考になれば幸いです。ニッチすぎる！！！！
現場からは以上です。

参考（これしかなかった）
https://www.reddit.com/r/createjs/comments/4dfldb/how_do_i_use_base24_instead_of_external_library/