更改图像数组的颜色并使用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显示它们

回答

相关问题