画像の配列の色を変更してjQueryやCSSを使って表示する

Question

私は、サーバサイドのPHPから数多くのpng画像（base64でコード化された透明な背景、黒色の前景）を受け取るjavascript/jqueryコードを書いていますコードはAjaxを使用しています。 My Jqueryコードは、フォアグラウンド（黒）の色をランダムな色に変更し、画面のランダムな位置に画像を表示する必要があります。イメージが "images [i]"変数（文字列）に格納されているとします（ "i"はイメージの番号です）。

var myImg=[]; 

for (var i = 0; i < NumberOfImages; i++) { 
    myImg[i]=new Image(); 
    myImg[i].src = images[i]; 

    var w = myImg[i].width; 
    var h = myImg[i].height; 

    $(display).append("<canvas id='canvas"+i+"' style='width:"+w+"; height:"+h+"; position: absolute; top: "+i*10+"px; left: "+i*10+"px;'></canvas>"); 
    cnvs = document.getElementById("canvas"+i); 
    ctx = cnvs.getContext("2d"); 

    (function(i){ 
       myImg[i].onload = function() { 
       ctx.drawImage(myImg[i],0,0, w, h); 

     var imgd = ctx.getImageData(0, 0, w, h); 

     for (j = 0; j <imgd.data.length; j += 4) { 
      imgd.data[j] = theRandomColorR[i]; 
       imgd.data[j+1] = theRandomColorG[i]; 
      imgd.data[j+2] = theRandomColorB[i]; 
     } 

     ctx.putImageData(imgd, 0, 0); 
     myImg[i].src = cnvs.toDataURL(); 
     images[i]=myImg[i].src 
     $(display).append(myImg[i]).css({top: i*10,left: i*100, width:i*10, height:i*10}); 
      //or: 
     $(display).append("<img style='width:100px; height:100px; top:200px; left:200px;' src='"+myImg[i].src+"'></img>"); 
    }    
})(i); 

しかし、この方法は、私は画像の位置やサイズ上の任意のコントロールを持っていない：私はキャンバスを使用してみました。それらのサイズおよび色は同じであり、画像は同じ幅および/または高さで表示される。理由はおそらく、すべてを非同期にする "onload"関数の使用です。誰かが、私は単にAjaxから画像を受け取って変数に格納し、jquery/javascript/CSSを使って色を変更し、後で使用するためにその変数に保存する方法を知っていますか？

ありがとうございました。

Answer 1

私はむしろjavascript/jQueryを使用したいと思います。私はかつてあなたのために役立つかもしれないjavascriptで自分のためのギャラリースクリプトを作った。

http://www.4shared.com/zip/QxWYPWo3/file.html?refurl=d1url