更改圖像數組的顏色並使用jQuery或CSS顯示它們

我正在寫一個javascript/jquery代碼，它從服務器端PHP接收許多png圖像（base64編碼，透明背景，黑色前景）使用Ajax的代碼。然後，我的jquery代碼應該將前景（黑色）的顏色更改爲隨機顏色，並將圖像顯示在屏幕的隨機位置上。假設圖像存儲在「圖像[i]」變量（作爲字符串）中（「i」是圖像的數量）。我嘗試使用畫布：更改圖像數組的顏色並使用jQuery或CSS顯示它們

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更改其顏色，並將其存儲到該變量以備後用？

謝謝。

來源

2012-03-27 Bahar S

我寧願你只使用javascript/jQuery。我曾用javascript爲我自己製作了一個gallery-script，它可以幫助你。

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

來源

2012-03-27 02:48:15

謝謝。我需要我的圖像也是可拖動的。我想知道如果最好的方法是嘗試讀取base64字節逐字節並改變顏色。我可以知道你的意見嗎？你知道這個方法有什麼好的來源嗎？ – 2012-03-27 19:42:24

隨着HTML5也出現了JavaScript中的新方法。看看：拖放（DnD）html5。看到這個例子：http://html5doctor.com/native-drag-and-drop/ – 2012-03-27 21:21:56

更改圖像數組的顏色並使用jQuery或CSS顯示它們

回答

相關問題