createImageData の考察

画像をいじるためには CanvasよりImageDataを取得しなければなりません。
正直取得すること事態はたいした問題では無いのですが、どういう訳かImageDataを作る事が可能なのです！
それがどうした！と思う方もいらっしゃると思うのですが、正直なぜ、作成する事が可能なのか良くわからないので、色々実験してみる事にしました。

２つのImagedataを作成した場合はそれぞれに違う画像を持つ事ができるのか？

一番使えそうな物として、２つImageDataを作成して、各に違う画像を書き込み、ちゃんと違う画像データが入っているかを確かめます。

やってみました……………………
やっぱりダメでした、えぇダメでした、そんなに甘く無いっぽいです。そう考えるとcreateImageDataの必要性って…何のために あるのだろう、良くわかりません。以下に作ったソースを掲載しました。多分間違って無いかも…
うまくできました！！、普通に間違ってただけっぽいです＾＾；

修正内容

• 画像を読み込むImageオブジェクトの変数名が一緒だったので、最初に読み込んだ画像がちゃんと読み込めていませんでした＾＾；
• ImageDataオブジェクトを作るCanvasを表示Canvasから裏のCanvasに変更しました。

まとめ

今回の考察によりCanvasのサイズ内であればImageDataはメモリが許される限りいくらでも 作成する事が可能である。
尚、作成されたImageDataは各にバッファを持っているので、同じCanvasから作成されたとしてもデータ内容は干渉されない。

	function ImageDataSample( ViewID, ReadID, interfaceID ) {
	    var view_canvas   = document.getElementById( ViewID );
	    var read_canvas   = document.getElementById( ReadID );
	    var inf_canvas  = document.getElementById( interfaceID );
	    //------------------------------------------------------------------------------
	    if( ! view_canvas || ! view_canvas.getContext ) return false;
	    if( ! read_canvas || ! read_canvas.getContext ) return false;
	    if( ! inf_canvas || ! inf_canvas.getContext ) return false;
	    //------------------------------------------------------------------------------
	    var view_ctx    = view_canvas.getContext( '2d' );
	    var read_ctx    = read_canvas.getContext( '2d' );
	    var imgA        = null;
	    var imgB        = null;
	    //------------------------------------------------------------------------------
	    //  imgA の作成
	    var img      = new Image;
	    img.src      = "img/img0012.jpg?" + new Date().getTime();;
	    img.onload  = function( ) {
	        imgA = read_ctx.createImageData( 640, 480 );
	        view_ctx.drawImage( img, 0, 0 );
	        var data = view_ctx.getImageData( 0, 0, 640, 480 );
	        for( y = 0; y < read_canvas.height; y++ ) {
	            for( x = 0; x < read_canvas.width; x++ ) {
	                pos   = y * ( read_canvas.width * 4 ) + ( x * 4 );
	                imgA.data[pos + 0] = data.data[pos + 0];
	                imgA.data[pos + 1] = data.data[pos + 1];
	                imgA.data[pos + 2] = data.data[pos + 2];
	                imgA.data[pos + 3] = data.data[pos + 3];
	            }
	        }
	    }
	    //------------------------------------------------------------------------------
	    //  imgB の作成
	    var img2    = new Image;
	    img2.src    = "img/img0006.jpg?" + new Date().getTime();;
	    img2.onload   = function( ) {
	        imgB = read_ctx.createImageData( 640, 480 );
	        view_ctx.drawImage( img2, 0, 0 );
	        var data = view_ctx.getImageData( 0, 0, 640, 480 );
	        for( y = 0; y < read_canvas.height; y++ ) {
	            for( x = 0; x < read_canvas.width; x++ ) {
	                pos   = y * ( read_canvas.width * 4 ) + ( x * 4 );
	                imgB.data[pos + 0] = data.data[pos + 0];
	                imgB.data[pos + 1] = data.data[pos + 1];
	                imgB.data[pos + 2] = data.data[pos + 2];
	                imgB.data[pos + 3] = data.data[pos + 3];
	            }
	        }
	    }
	    //------------------------------------------------------------------------------
	    //  クリックイベント
	    var index = 0;
	    inf_canvas.onclick = function( e ) {
	        if( index == 1 ) view_ctx.putImageData(imgB, 0, 0);
	        else if( index == 0 ) view_ctx.putImageData(imgA, 0, 0);
	        index = ( index + 1 ) & 1;
	    }
	};