이미지 배열의 색상을 변경하고 jQuery 또는 CSS를 사용하여 표시하십시오.

Question

서버 측 PHP에서 많은 png 이미지 (base64 인코딩, 투명 배경, 검은 색 전경색)를받는 javascript/jquery 코드를 작성하고 있습니다. 코드는 Ajax를 사용한다. 그런 다음 내 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"함수의 사용 일 것입니다. 아무도 아약스에서 이미지를 받아 변수에 저장하고 jquery/javascript/CSS를 사용하여 색상을 변경 한 다음 나중에 사용할 수 있도록 해당 변수에 저장하는 방법을 알고 있습니까?

감사합니다.

Answer 1

차라리 javascript/jQuery 만 사용하고 싶습니다. 한 번 javascript로 자신을위한 갤러리 스크립트를 만들었습니다.

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