POPSブログ

CreateJS ステージのキャプチャーと複数コンテナを合成し画像に変換

322

  Category:  javascript2014/09/20 pops 

CreateJSで、SVGはcanvgで画像変換されていますので、当然キャプチャー可能ですが、一応テストしてみます。あわせて、cacheCanvas、getCacheDataURL()、などを使用してのステージのキャプチャー、任意の複数画像、コンテナ、などの合成テストも行ってみました。
easeljs-0.7.1 でのテストです。

 

CreateJS ステージのキャプチャーと複数コンテナを合成し画像に変換テスト

ステージの画像を取得すれば、キャプチャーで有り、「画像」「テキスト」「グラフイック」など画像として取得して、それを合成すれば何らかの使い道があるかも知れません。


 

▼[ 簡単な説明の目次に進む ]

 

DEMO

▼[ 目次 ]


CreateJS ステージのキャプチャーと複数コンテナを合成し画像に変換デモ (createJS105.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///



Chrome Opera Firefox Safari(Win) IE9-11で動作確認済み。 Safari(Mac)、は未確認です。


 

HTML JS CSS


HTML、JS、CSS

基本的に「前ページ」のものですので今回は省略します。前ページを参照ください。


 

簡単な説明


[ 簡単な説明の目次 ]



[説明図]

 

CreateJS ステージのキャプチャーと複数コンテナの合成し画像に変換

▲[ 目次 ]


1. デモではInkscapeで作ったSVGをcanvgを表示、ステージをキャプチャーします。
2. 画像に変換されたSVGですからキャプチャーに問題はないが、一応確認のためのテストです。
(デモでは 640x300サイズ のSVGを使用しています)
3. テストでは前ページのものに、通常のグラフイック、テキスト、画像を追加して検証しています。
4. 任意の複数画像、インスタンス、などの合成テストは特殊な用途です。


サンプルJSとスクリプトの詳細など

基本的に前ページのものを使用していますので参照ください。


「デモ」サンプルではSVGを画像化して使用しています。

前ページの流れとしてSVGを使用しているのであり、画像化SVGをキャプチャーして問題があるかのテストをも兼ねています。
SVGを画像化することはSecurityを考慮すれば余り好ましいことでは有りません。


ステージのキャプチャー

▲[ 目次 ]


ステージのキャプチャーには大まかに、
1 「Canvas仕様に従い直接JavaScriptで処理する方法」と、
2 「CreateJSのcacheを利用する方法」の2通りあると思います。
キャプチャー画像は、何らかの目的で使用する為のものですから、キャプチャーに邪魔なインスタンスは非表示にすれば、画像化されません。


Canvas仕様に従い直接JavaScriptで処理する方法

▲[ 目次 ]


スコブル簡単なために、ワタシの場合はこちらで処理する方が多い。ステージのエレメントを取得して、新たなcanvasエレメントに描画するだけです。キャッシュはしていません。
画像として保存する場合は、toDataURL() で画像(.png)にすれば良いだけです。

getElementById()で同じものを「コピー」したことになりますので、そのままではTweenなども有効になりますので、Canvasエレメントに取り込み内部画像化(Base64)します。
画像として保存する場合、IEで「Aリンク」が Security のため機能しませんので、<img>でjquery処理しています。


「デモ」の例、ステージエレメントのIDを #mainCanvas とした場合です。
画像表示のDIVのIDを #linkbox と仮定します。マウスの右クリックでPNG画像として保存可能です。
cacheImg=createImgCanvas(...)はメモリー上にキャッシュを取っている事と同様です。
canvasWidth、canvasHeightはステージの大きさです。




var dlImage;
-----------------------------------------------------------------------------

//ステージエレメントをcaptureし画像化する
function capture_stage() {

	//ステージエレメント指定
	var canvas=document.getElementById('mainCanvas');//コピーになってしまう
	//キャプチャー画像変換/別canvasで処理したほうが良い
	var cacheImg=createImgCanvas(canvasWidth,canvasHeight,canvas);//表示用の場合は重要createImgCanvas処理のこと
	dlImage=cacheImg.toDataURL("image/png");//変換
	//dlImage=canvas.toDataURL("image/png");//直接でも可能だが安心はできない

	//jquery
	$("#linkbox").html('<img src="'+ dlImage +'" />');

	//DOWNLOAD
	//$("#linkbox").html('<p><a href="'+ dlImage +'">DOWNLOAD</a></p>');
}

-----------------------------------------------------------------------------

//canvasエレメントに描画
function createImgCanvas(w,h,patternimg) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.drawImage(patternimg,0,0,w,h);

	return canvas;
}

● 画像としてステージに表示する場合。



インスタンス=new createjs.Bitmap(cacheImg);

CreateJSのcacheを利用する方法

▲[ 目次 ]


CreateJSのcacheを実行した場合、updateCache()などを行わないと、画面がcacheで固定されますので、ここではキャプチャー目的ですから、すぐにキャッシュを削除します。
キャッシュはcacheを実行で .cacheCanvas で取得できます。Bitmap()に入れれば表示もできますし、色々な加工も出来ます。getCacheDataURL()を利用すればtoDataURL化されたデータを取得できます。


● cacheCanvasについての「community.createjs.com」での記載

「community」に、Copy canvas to bitmap?、と言う記事があります。
cacheCanvas値をBitmap()ですぐ表示できる事です。



You can use a canvas as a source for another bitmap.

var bmp=new createjs.Bitmap(canvasInstance);
If you cache any displayobject, it creates an off-screen canvas that you can use as well.

myContainer.cache(0,0,100,100);
var bmp=new createjs.Bitmap(myContainer.cacheCanvas);

簡単に、コンテナの中のレイアウト通りの画像を取得できる事を示唆しています。


キャッシュ (cache)

CreateJSでは、インスタンスなどを範囲を指定してキャッシュすることが出来ます。PNG画像同等(Base64)のものに成ります。キャッシュをとれば優先してステージに表示される仕組みです。
但し、グラフイック、テキストなどもキャッシュすれば画像になりますので拡大した場合の見え方など相違がでます。


cacheの注意点

1. 原則、画像は cache しません。すでに cache 同等の画像データが存在していますからその必要が有りません、不本意に cache すれば効率低下とエラーの原因になりますので注意ください。
2. 構造が複雑な場合、または複雑なグラフイックなどは cache されない場合もあります。(まだ完全ではないそうです)
3. Textクラスの設定次第では、正しい位置で cache されません。修正の必要があります。
4. つまり、現時点では、cache は表示してみなければわからないと言う事です。


cacheCanvasの利用

1. 画像、グラフイックなどは、コンテナでラップして、コンテナの cacheCanvas を利用した方が効率が良い。
2. cacheCanvas は画像同等のものであるから加工も容易である。
3. 安全な cacheCanvas値 を加工して最後に必要なら URL化 するのが順序のようです。
4. cacheCanvasで処理するのがベターである。


getCacheDataURL()の注意点

1. getCacheDataURL()の情報は画像のURLですから、ローダーで一旦処理しなければ表示しない、或いは次の処理など行えないなどの不具合が発生する場合があります。
2. Firefox、Safari(Win)の場合注意のこと。Safari(Mac)は不明です。
Safari(Win)は更新されていませんので(終了同然)、利用されている方はもう居ないと思いますが、...
3. 特性を理解して使用する。


toDataURL()はJavaScript直接の処理であり、getCacheDataURL()はCreateJSを経由しての処理ですから、この辺の処理速度にも問題がありそうです。
getCacheDataURL()処理が1つの場合はよいが、複数あれば Firefox、Safari(Win)で旨く処理できなくなるようです、タイミングの問題もあると思いますが。


cacheCanvas

● ステージをキャッシュして、cacheCanvasを利用表示する。
cacheCanvas値は直接Bitmap表示出来ます、加工などもOKです。




//ステージをキャッシュしBitmap表示する
function capture_stageCache() {

	//ステージキャッシュ
	stage.cache(0,0,canvasWidth,canvasHeight);
	//ステージキャッシュを取得
	var cacheImg=stage.cacheCanvas;
	//ステージキャッシュを削除
	stage.uncache();

	//ステージにBitmap表示
	var bitmap=new createjs.Bitmap(cacheImg);
	stage.addChild(viewtext);
}

getCacheDataURL / 注意

● ステージをキャッシュして、getCacheDataURLを利用し、jquery処理で表示しています。
getCacheDataURL()処理はcacheCanvasをURL化してくれます。利用の際は画像データではないので注意ください。
下記では、すぐに <img> 処理しているので支障はない。

getCacheDataURLの使用は注意が必要ですから、目的を認識して利用する。




//ステージをキャッシュし画像化する
function capture_stageCache() {

	//ステージキャッシュ
	stage.cache(0,0,canvasWidth,canvasHeight);
	dlImage=stage.getCacheDataURL();//URL変換
	//ステージキャッシュを削除
	stage.uncache();

	//jquery
	$("#linkbox").html('<img src="'+ dlImage +'" />');
}

getCacheDataURL はリンク、ダウンロード用途と認識したほうが良い。


● ステージをキャッシュして、toDataURLを利用し、jquery処理で表示しています。
このような場合は、getCacheDataURL()処理より、安心感があります。stage.cacheCanvas は Bitmap() に挿入可能です。また加工も可能ですから、cacheCanvas 利用がベター。




//ステージをキャッシュし画像化する
function capture_stageCache2() {

	//ステージキャッシュ
	stage.cache(0,0,canvasWidth,canvasHeight);
	//ステージキャッシュを取得
	var cacheImg=stage.cacheCanvas;
	//ステージキャッシュを削除
	stage.uncache();
	dlImage=cacheImg.toDataURL("image/png");//URL変換

	//jquery
	$("#linkbox").html('<img src="'+ dlImage +'" />');
}

toDataURL()処理は早い。


ステージをキャッシュする方法が、うまく行かない場合は「Canvas仕様に従い直接JavaScriptで処理する方法」を利用ください。確実です。


● ステージをキャッシュして、getCacheDataURLを利用し、ステージのどこかにBitmap()表示します。
Bitmap(画像URL)の形ですので読み込めば表示します。但し処理の条件でうまく行かない場合もあります。Bitmap(画像URL)は便利のようで使い難い。

このような記述は極力避けてください。


一応時間経過で表示はしますが、処理の如何によっては、 Firefox、Safari(Win)で処理できなくなる。
本来メモリ上にあるからすぐ表示処理出来そうに思うのだがブラウザによって違います。
反面、IE、Chromeはすぐ処理してくれる。Firefox、Safari(Win)の画像処理が遅い事が根本的原因か?




//ステージをキャッシュしBitmap画像表示する
function capture_stageCacheBitmap() {

	//ステージキャッシュ
	stage.cache(0,0,canvasWidth,canvasHeight);
	dlImage=stage.getCacheDataURL();//URL変換
	//ステージキャッシュを削除
	stage.uncache();

	var cachIimg_v=new createjs.Bitmap(dlImage);//マチガイの元
	stage.addChild(cachIimg_v);
}

getCacheDataURL()を直接にBitmap()処理表示するのは、マチガイの元である。


getCacheDataURLを直接Bitmap()で表示は恐ろしか!
表示はしますが、これは、「何時の日か表示します」の類でありますので、続けて何らかの処理をする場合はエラーに成り易い。Bitmap(画像URL)と同じ扱いです。




var cachIimg_v=new createjs.Bitmap(stage.getCacheDataURL());//マチガイの元

getCacheDataURL()は控えて、cacheCanvas を利用すれば問題は起きない。
cacheCanvas は、「完全読み込み終了」の画像と同じものだからです。




var cacheImg=stage.cacheCanvas;
var cachIimg_v=new createjs.Bitmap(cacheImg);//問題は起きない

-----------------------------------------------------------------------------

あるいは
var cachIimg_v=new createjs.Bitmap(stage.cacheCanvas);//問題は起きない

どうしてもgetCacheDataURL()処理をするなら、本来はローダーを介するのが正しい、Firefox、Safari(Win)でもOK。但しこれが複数の場合は遅延のため旨く機能しない。スクリプトの作りこみが大変です。




//ステージをキャッシュしローダーでBitmap画像表示する
function capture_stageCacheBitmap() {

	//ステージキャッシュ
	stage.cache(0,0,canvasWidth,canvasHeight);
	dlImage=stage.getCacheDataURL();//URL変換
	//ステージキャッシュを削除
	stage.uncache();

	//ローダー
	var imgloader=new Image();
	imgloader.src=dlImage;
	imgloader.onload=function() {
		var cachIimg_v=new createjs.Bitmap(imgloader);
		stage.addChild(cachIimg_v);
	};
}

面倒、止めたほうが無難だ!。


汎用コンテナキャッシュ処理

▲[ 目次 ]


コンテナインスタンスを指定しての処理できる汎用形であるが、ステージのキャプチャーも可能です。但しコンテナの原点が左上に限ります。(キャッシュを、左上原点 00 で取得しているため)
コンテナcaptureImage階層にBitmap()で表示可能ですが、コンテナの構造によっては旨く行かない場合もあるかも知れません。

ステージ指定では、一応問題がないようですが、....。


capturecontainerがあり事前に以下の様になっていると仮定する。(TEST用)



//capture画像表示用
var capturecontainer;
var captureImage;
-----------------------------------------------------------------------------

//captureImage表示TEST
capturecontainer=new createjs.Container();
captureImage=new createjs.Bitmap();
capturecontainer.addChild(captureImage);
capturecontainer.x=20;
stage.addChild(capturecontainer);

-----------------------------------------------------------------------------

//コンテナをcaptureし表示する/画面表示/全てOKだがURLであるので注意が必要だろう
capture_container(stage);


//コンテナをcaptureし表示する、単体処理/getCacheDataURL()
function capture_container(instance) {
	//キャッシュ
	instance.cache(0,0,canvasWidth,canvasHeight);
	//コンテナキャッシュURLを取得
	var cacheImg=instance.getCacheDataURL();//注意
	//コンテナキャッシュを削除
	instance.uncache();
	dlImage=cacheImg;

	//画面表示/全てOKだがURLであるので注意が必要だろう
	//加工するには注意だ
	//captureImage.image=new createjs.Bitmap(dlImage).image;

	//jquery/全てOK
	$("#linkbox").html('<img src="'+ dlImage +'" />');
}

上記、Bitmap(dlImage)は単に表示するだけであるので問題はない。加工処理を伴えば旨く処理出来ないブラウザも出てくるでしょう。


加工を伴うならば、下記のcacheCanvas方式にすべきだ。



//コンテナをcaptureし表示する、単体処理/cacheCanvas方式
function capture_container(instance) {
	//キャッシュ
	instance.cache(0,0,canvasWidth,canvasHeight);
	//コンテナキャッシュを取得
	var cacheImg=instance.cacheCanvas;
	//コンテナキャッシュを削除
	instance.uncache();
	dlImage=cacheImg.toDataURL("image/png");//URL変換

	//captureImage.image=new createjs.Bitmap(cacheImg).image;

	//jquery
	$("#linkbox").html('<img src="'+ dlImage +'" />');
}

「デモ」のコンテナのキャッシュについて

「デモ」では結構複雑なテキストアニメをTween途中で、「コンテナのキャッシュ」で取得して表示していますが、「デモ」に限り別段問題はないようです。
但し、ボタンを押した時と、実際に表示される画像にはTween途中で有り、負荷も大きいので少々時間的なズレが発生します。(マシン環境がよければズレは少ないでしょう)
通常は、Tween終了後に「コンテナのキャッシュ」する事が多いと思いますし、CreateJSで必ず「キャッシュ」が成功する保障は有りませんのでこの点を理解ください。


 

インスタンスを合成して1枚の画像にする

▲[ 目次 ]


インスタンスを合成して1枚の画像にする作業は、キャッシュを合成すれば良いのだから簡単のようですが、実際は結構難しいようです。
ここでは、ステージ内の指定インスタンスを同じポジションで合成する方法を考えてみます。


1. 画像は原則、キャッシュ出来ないので区別しなければならない。
2. rexX、rexYの設定があるのでそれを考慮しなければならない。
3. Textの処理次第で原点位置が違ってくる。(textAlign="center"、textBaseline="middle"、が問題だ)
4. 合成を意識した、コンテナ構成が必要です。
5. 必要の無い部分を非表示にして、ステージをキャプチャーした方が実際には簡単です。実は!
6. 他にも処理方法はあると思います。


コンテナのキャッシュ

指定コンテナ内部に表示されているインスタンスの画像データを同じポジションで1枚の画像の状態で、一括取得できますので便利です。(コンテナ内部インスタンスを個別に処理は大変だ!)
キャプチャーを意識した、目的に沿ったコンテナ配置構成にすることが大事になります。


全てステージの大きさで原点位置が左上の場合

▲[ 目次 ]


全てステージの大きさで原点位置が左上で配置されている場合は簡単です。画像は読み込んだデータを使い、コンテナなどはキャッシュして合成します。
Bitmap画像の場合は、imageプロパティが存在しますのでそれで判定します。


全てステージの大きさであり、コンテナの原点左上の中にインスタンスが配置されていれば良い。これが条件である。



canvasWidth,canvasHeightはステージの大きさ、
[] 内は処理するインスタンス

capture_MultiCacheCanvas_S(canvasWidth,canvasHeight,[svgImage3,svgImage2,svgImage,wrapcontainer]);

-----------------------------------------------------------------------------

//ステージサイズのみの簡易形
function capture_MultiCacheCanvas_S(w,h,items) {

	var cache_v=[];
	//合成canvas
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	for (var i=0; i < items.length; i++) {

		cache_v[i]=items[i].image;//image取得

		if(cache_v[i] == undefined) {

			items[i].cache(0,0,w,h);
			
			cache_v[i]=items[i].cacheCanvas;

			//キャッシュを削除
			items[i].uncache();
		}

	}

	//合成
	for (var i=0; i < items.length; i++) {
		//描画合成
		ctx.drawImage(cache_v[i],0,0,w,h);
	}

	//重ねたアイテムをtoDataURL化
	var cacheImg=createImgCanvas(w,h,canvas).toDataURL("image/png");
	dlImage=cacheImg;
	//jquery
	$("#linkbox").html('<img src="'+ dlImage +'" />');

}

大きさ、原点位置が違う場合

▲[ 目次 ]


全てキャッシュを利用しますが、画像はコンテナラップして、キャッシュを取ります、その他は原点左上に修正してキャッシュします。但し、Textの処理次第で原点位置が違ってくるものは、最初からコンテナラップの構造が必要です。
特別に合成しなければならない場合の用途ですが、通常は余り必要とはしないでしょう。
部材などが、コンテナにラップされているほうが正確です。何らかの問題があれば、問題箇所を個別に処理して、2重合成しなければならない場合もあるかも知れません。


以下の処理で、ほとんど狂いなく合成可能です。「デモ」参照ください。
画像の場合は、imageプロパティーが存在しますのでそれで判定しますが、大きさなど「まちまち」ですから、メモリー上で、コンテナラップして処理します。
原点左上のコンテナでラップされていれば処理し易い。(キャッシュを、左上原点 00 で取得しているため)




canvasWidth,canvasHeightはステージの大きさ、
[] 内は処理するインスタンス

svgImageは画像化されたSVGです、wrapcontainerはアニメテキストコンテナ
capture_MultiCacheCanvas(canvasWidth,canvasHeight,[svgImage3,svgImage2,svgImage,wrapcontainer]);

適当なグラフイック、テキストなどを作り配置してみました
capture_MultiCacheCanvas(canvasWidth,canvasHeight,[backrect2,sampleImage,subtextcontainer,svgImage2,svgImage]);

-----------------------------------------------------------------------------

//改良 cacheCanvas使用/複雑もある程度OKかも/こちら使用
function capture_MultiCacheCanvas(w,h,items) {

	var cache_v=[];
	//合成canvas
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var pos_x=[];//位置データ
	var pos_y=[];
	var reg_x=[];//regデータ
	var reg_y=[];
	//2d
	var ctx=canvas.getContext("2d");

	for (var i=0; i < items.length; i++) {

		cache_v[i]=items[i].image;//image取得

		//画像
		if(cache_v[i] != undefined) {

			var contana=new createjs.Container();
			var clone_v=items[i].clone();
			//位置取得
			clone_v.x=items[i].x;
			clone_v.y=items[i].y;

			clone_v.regX=items[i].regX;
			clone_v.regY=items[i].regY;
			clone_v.scaleX=items[i].scaleX;
			clone_v.scaleY=items[i].scaleY;

			contana.addChild(clone_v);//クーロンでいれる

			//キャッシュ
			contana.cache(0,0,canvasWidth,canvasHeight);
			cache_v[i]=contana.cacheCanvas;

			//ctx描画合成
			ctx.drawImage(cache_v[i],0,0,w,h);

		}

		//画像以外
		if(cache_v[i] == undefined) {

			var _w=w;
			var _h=h;
			//regデータ
			reg_x[i]=items[i].regX;
			reg_y[i]=items[i].regY;
			//位置取得
			pos_x[i]=items[i].x;
			pos_y[i]=items[i].y;
			var point=items[i].localToGlobal(items[i].x,items[i].y);
			items[i].regX=0;
			items[i].regY=0;
			items[i].x=point.x;
			items[i].y=point.y;

			//キャッシュ
			items[i].cache(items[i].x,items[i].y,_w,_h);
			cache_v[i]=items[i].cacheCanvas;
			//キャッシュを削除
			items[i].uncache();

			//ctx描画合成
			ctx.drawImage(cache_v[i],items[i].x,items[i].y,_w,_h);

			items[i].regX=reg_x[i];
			items[i].regY=reg_y[i];
			items[i].x=pos_x[i];
			items[i].y=pos_y[i];
		}

	}

	//重ねたアイテムをtoDataURL化
	var cacheImg=createImgCanvas(w,h,canvas).toDataURL("image/png");
	dlImage=cacheImg;
	//jquery
	$("#linkbox").html('<img src="'+ dlImage +'" />');

}

問題があれば自己解決ください。


 

その他の注意点など

▲[ 目次 ]


Textの処理次第で原点位置が違ってくる

 

Textクラスに、textAlign="center"、textBaseline="middle"、の設定をすると原点が右上に移動してしまいます。
よって正確なキャッシュを取得出来なくなりますから、事前にコンテナでラップします。
ステージ上の同じ位置で正確にキャプチャーする場合はラップコンテナの原点左上が良いので、2重のラップが必要の時もあるでしょう。

親ラップのコンテナを対象にキャッシュ、キャプチャー処理すれば、正確なレイアウトでのキャプチャーを行えます。


アニメ、LOGO-TEXTのコンテナラップの例、
logotextcontainerのみでアニメーション表示は問題ないのですが、logotextcontainerのキャプチャーは正確で有りません。文字が欠けてしまいますので、下記の様に、wrapcontainerでラップしました(「デモ」の場合)。
アニメテキストは結構複雑な作りですが、現時点では正確にキャプチャー出来るようです。


ラップ前



//LOGO-TEXT
logotextcontainer=new createjs.Container();
//表示位置
logotextcontainer.x=55;
logotextcontainer.y=200;
stage.addChild(logotextcontainer);

ラップ後



//LOGO-TEXT/wrap
wrapcontainer=new createjs.Container();
logotextcontainer=new createjs.Container();
//表示位置
logotextcontainer.x=55;
logotextcontainer.y=200;
wrapcontainer.addChild(logotextcontainer);
stage.addChild(wrapcontainer);

1番簡単な階層の合成方法

上の例では、全てステージに配置しているものですから、表示非表示で階層を選定して、ステージをキャプチャーすれば良い。方法は幾らでもありますから其の中で良い方法を見つければよろしい。(適当に言うのは容易いことです)


1. 表示非表示で階層を選定する。
2. ステージをキャプチャーして、画像データをメモリーに保存する。
3. 階層を元に戻す。
4. 場合によっては、Tickerを作業中切るのも方法です。
5. ステージの欄外で作業を行うことが可能です。この場合見えませんから都合が良いしコンテナキャッシュも取れるので利用価値があると思います。
6. ステージ2などを作り、必要なものをクローンで配置する方法もありますが、かえって面倒ですしマチガイの基と成るかも知れません。簡単な構成のものならクローンで配置も楽。


合成すべきものを1つのコンテナに収容しておく

合成すべきものを1つのコンテナに収容しておき、其のコンテナをキャッシュするのも簡単な方法になります。つまりは設計次第で簡単になる事もあるでしょう。


あるコンテナを、画像エフェクト、修飾文字の制作などのアプリの作業領域にしておき、コンテナ毎キャプチャーするのも良い方法かも知れません。出来上がり画像を即ダウンロード出来ます!。


キャプチャー画像の利用例のデモ

▲[ 目次 ]


キャプチャー画像を画像分割アニメーションと組合せました。単にこのためにステージのキャプチャーを行っています。
最初のテキストアニメーション終了画面を、分解してシームレスに次の画像分割アニメーションへと連続させます。
下記デモを参照ください。



Chrome Opera Firefox Safari(Win) IE9-11で動作確認済み。 Safari(Mac)、は未確認です。

 

以下の当方の記事を参照ください。

【参照】当方の記事: CreateJS canvgでSVGをラスター画像に変換してBitmap表示

【参照】当方の記事: CreateJS 画像分割とテキストアニメーションの組み合わせ (最新)



一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。

CreateJSは結構「仕様」が変わりますので特に注意が必要です。


 

以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]