4

在第一次尝试在 HTML5 画布上完成一些像素操作时，我编写了一个代码来更改背景图像的特定部分。我正在使用蒙版图像来标记需要更改的特定部分。我一次绘制 2 条垂直线 1 像素。我的代码如下所示：

var backgroundTemp=[0,0,false];

function generateBg(){
    var bgGenCanvas  = document.getElementById("backgroundGenerator");
    var bgGenCtx = bgGenCanvas.getContext("2d");

    var bgMaskCanvas  = document.getElementById("backgroundMask");
    var bgMaskCtx = bgMaskCanvas.getContext("2d");

    if(backgroundTemp[0]==0){
        var img = new Image();
        img.onload=function(){
            bgGenCtx.drawImage(this,0,0);
            backgroundTemp[0]++;
            generateBg();
        }
        backgroundTemp[0]++;
        img.src = 'images/ordnerGreen.png';
    }
    if(backgroundTemp[1]==0){
        var img = new Image();
        img.onload=function(){
            bgMaskCtx.drawImage(this,0,0);
            backgroundTemp[1]++;
            generateBg();
        }
        backgroundTemp[1]++;
        img.src = 'images/ordnerMask.png';
    }
    if(backgroundTemp[0]==2 && backgroundTemp[1]==2 && backgroundTemp[2]==false){
        backgroundTemp[2]=true;
        var newColor=hexToRgb(settings.ordnerColor);
        var genData = bgGenCtx.getImageData(0,0,bgGenCanvas.width,bgGenCanvas.height);
        var maskData = bgMaskCtx.getImageData(0,0,bgMaskCanvas.width,bgMaskCanvas.height);
        var darkenAt1=796*4;
        var darkenAt2=996*4;
        var widthPerLine=bgGenCanvas.width*4;
        for(var i=0;i<maskData.data.length;i+=4){
            var currentLine=Math.ceil(i/widthPerLine);

            var red=maskData.data[i];
            var green=maskData.data[i+1];
            var blue=maskData.data[i+2];

            if(red==255 && green==255 && blue==255){
                red=newColor.r;
                green=newColor.g;
                blue=newColor.b;
                if(darkenAt1==i || darkenAt2==i){
                    red-=Math.floor(red/4);
                    green-=Math.floor(green/4);
                    blue-=Math.floor(blue/4);
                    if(darkenAt1==i){
                        darkenAt1+=parseInt(widthPerLine);
                    }
                    if(darkenAt2==i){
                        darkenAt2+=parseInt(widthPerLine);
                    }
                }
                genData.data[i]=red;
                genData.data[i+1]=green;
                genData.data[i+2]=blue;
            }
        }
        bgGenCtx.putImageData(genData,0,0);
        document.getElementById('viewerBackground').style.backgroundImage="url('"+bgGenCanvas.toDataURL()+"')";
    }
}

$(window).load(function(){generateBg();});

起初它随机工作或不工作。有时结果是空的，有时是原始图像，有时是修改后的图像。我认为图像可能尚未完成加载，因此我添加了一个结构以确保它们都将被加载。这适用于 Firefox 和 Chrome。但是在 IE 中问题仍然存在，每次我按 F5 时都会得到一个随机结果。

任何人都知道如何解决这个问题？

4

1 回答 1

2

根据图像加载速度（以及它们在缓存中的可用性），您最终可能会执行 3 次像素迭代，而不是只执行一次。

在最坏的情况下，您的 onLoad 侦听器将在指定图像的 src 后立即执行（如果图像在缓存中可用）

为避免这种情况，您应该尝试按顺序加载图像（即从 backgroundTemp[0] onLoad 函数加载 backgroundTemp[1] 图像）并从 backgroundTemp[1] onLoad 启动像素迭代内容。

于 2012-10-21T20:07:56.960 回答