###前提・実現したいこと
現在Canvasで少しややこしい画像合成処理を行っています。
おおまかには、
A:配列内の画像
B:配列内の画像
C:乗算元の画像
D:一番最後に合成したい画像画像
とすると、
配列内のAとBを全て合成し、画像AB'とする。そのAB'の上に画像Cを乗算合成し、画像ABC'とする。その合成画像の上に画像Dを合成し最終画像画像ABCD'を生成する。というものです。
コード的には以下のように記述しています。
###該当のソースコード
javascript
1//画像を乗算する関数 2function multiply(shade_img, canvas_id) { 3 var canvas_img = new Image; 4 canvas_img.src = shade_img; 5 canvas_img.addEventListener("load", function(){ 6 var canvas_shade = document.getElementById(canvas_id); 7 if(canvas_shade.getContext){ 8 var context_shade = canvas_shade.getContext("2d"); 9 context_shade.globalCompositeOperation = "multiply"; 10 context_shade.drawImage(canvas_img, 0, 0, width, height); 11 } 12 } 13} 14 15//配列内に格納された画像を順に合成していく関数 16function synthesize_img(src_arr, shade_img, canvas_id) { 17 var canvas = document.getElementById(canvas_id); 18 var context = canvas.getContext("2d"); 19 context.clearRect(0, 0, width, height); 20 var images = []; 21 //配列内に画像を格納していく 22 for(var i in src_arr){ 23 images[i] = new Image; 24 images[i].src = src_arr[i]; 25 } 26 27 //配列内のすべての画像の読み込みが終わった時点で、画像の合成と描画を行う 28 var loadedCount = 1; 29 for(var i in images){ 30 images[i].addEventListener("load", function(){ 31 if(loadedCount == images.length){ 32 for(var j in images){ 33 context.globalCompositeOperation = "source-over"; 34 context.globalAlpha = 1.0; 35 context.drawImage(images[j], 0, 0, width, height); 36 } 37 38 //画像を乗算 39 multiply(shade_img, canvas_id); 40 41 //必ず最後に合成したい画像をここで合成 42 var img_last = new Image; 43 img_last.src = btn_front; 44 img_last.addEventListener("load", function(){ 45 context.globalCompositeOperation = "source-over"; 46 context.globalAlpha = 1.0; 47 context.drawImage(img_last, 0, 0, width, height); 48 }); 49 } 50 loadedCount++; 51 }, false); 52 } 53} 54
処理の流れとしては、
①引数として渡されたsrc_arr配列内の画像をimages配列に格納していく。
②images配列内の全ての画像が読み込まれるまで待ち、
③images配列内の全ての画像が読み込まれたら、images配列内の画像を順に合成する。
④全ての画像の合成が終わったら、multiply関数によって引数として渡されたshade_img画像を先ほどの合成画像に乗算合成する。
⑤乗算合成後、必ず最後に合成したい画像を先ほどの乗算画像に合成する。
しかし、上記の処理を行っても、AB'が一瞬表示された後にABCD'が表示されたり、画像DがAB'に合成された後にCが乗算合成されてしまったりします(画像AB'は問題なしのように思います)。
このようなことが起こるのはごくたまにといった感じなのですが、起こらないようにしたいです。
理想としては、全ての処理が上記の順番で行われ(途中の画像が表示されたりすることなく)、最終画像ABCD'が表示されるという流れです。
どこかおかしいところ、解決策などをアドバイス頂けると非常に助かります_(..)
###補足情報
画像AB'を作成するにあたっては、以下の記事を参考にしました。
http://qiita.com/akase244/items/9f3c60219f903254a6e2
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/05 00:41