Question

我正在编写一个javascript / jquery代码，它使用Ajax从服务器端PHP代码接收许多png图像（base64编码，透明背景，黑色前景）。然后，我的Jquery代码应将前景（黑色）的颜色更改为随机颜色，并在屏幕的随机位置显示图像。假设图像存储在“images [i]”变量中（作为字符串）（“i”是图像的数量）。我尝试使用canvas：

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

更改图像数组的颜色并使用jQuery或CSS显示它们

1 个答案: