Javascript 画布显示意外的颜色和赢得'；不要显示反转图像

我目前正试图复制Douglas Crockfords演示文稿中显示的效果。为了证明两次使用“一次性Pad”加密密钥的风险，他展示了两幅图像，用相同的密钥对它们进行加密，然后从另一幅中减去一幅，结果两幅图像同时显示

我的方法使用四个画布元素，一个用于显示键，两个用于加载图像，第四个作为减法的目标。我能够生成（某种程度上）随机密钥，加载图像并加密它们。尝试解密图像时会出现问题。为此，我将图像加载到第一个容器中，对其进行加密，然后对第二个容器进行加密（这将生成密钥的副本），然后减去两个容器的像素。原始图像仍然可以识别，但画布上会出现随机像素

将图像加载到第二个容器时，从空的第一个容器中减去图像，应该能够得到一个反转版本。出乎意料的是，画布保持空白

我的当前状态可在查看，请查看。

首先您将alpha设置为255，但随后继续并减去数据，因此您减去了alpha通道，而不管您已将其设置为255。我所要做的就是让它有条件

然后将值设置为256，但范围为0-255。最后但并非最不重要的一点是，在生成部分中需要另一个alpha条件

//generate a random image
(function() {
    var ct = getCTX("c0");
    var imgData = ct.createImageData(400, 400);
    var data = imgData.data;
    for (var i = 0, j = data.length; i < j; i++) {
        // Added conditional
        if (i % 4 === 3){
            data[i] = 255;
        }else{
            // random * 255 since color ranges are from 0-255
            data[i] = Math.floor(Math.random() * 255);
        }
    }
    ct.putImageData(imgData, 0, 0);
})();


function encodeWrap(id) {
    return (function() {
        var img = getCTX(id);
        var imgData = img.getImageData(0, 0, 400, 400);
        var data = imgData.data;
        for (var i = 0, j = data.length; i < j; i++) {
            if (i % 4 === 3){
                // added condition for alpha
                data[i] = 255;
            }else{
                // changed to 255
                data[i] = (data[i] + randomValues[i]) % 255;
            }
        }
        img.putImageData(imgData, 0, 0);
    });
}

document.getElementById("bt3").addEventListener("click", function() {
    var img1 = getImageData("c1"),
        img2 = getImageData("c2"),
        ct = getCTX("c3"),
        imgData = ct.createImageData(400, 400),
        data = imgData.data,
        tmp;

    for (var i = 0, j = data.length; i < j; i++) {
        if (i % 4 === 3){
            data[i] = 255;
        }else{
            tmp = img1[i] - img2[i];
            // changed to 255 since ranges go from 0 - 255
            if (tmp < 0){ tmp +=255;};
            data[i] = tmp;
        }
    }

    ct.putImageData(imgData, 0, 0);
});​

//生成一个随机图像
（功能（）{
var ct=getCTX（“c0”）；
var imgData=ct.createImageData（400400）；
var数据=imgData.data；
对于（变量i=0，j=data.length；i

首先您将alpha设置为255，但随后继续并减去数据，因此您减去了alpha通道，而不管您已将其设置为255。我所要做的就是让它有条件

然后将值设置为256，但范围为0-255。最后但并非最不重要的一点是，在生成部分中需要另一个alpha条件

//generate a random image
(function() {
    var ct = getCTX("c0");
    var imgData = ct.createImageData(400, 400);
    var data = imgData.data;
    for (var i = 0, j = data.length; i < j; i++) {
        // Added conditional
        if (i % 4 === 3){
            data[i] = 255;
        }else{
            // random * 255 since color ranges are from 0-255
            data[i] = Math.floor(Math.random() * 255);
        }
    }
    ct.putImageData(imgData, 0, 0);
})();


function encodeWrap(id) {
    return (function() {
        var img = getCTX(id);
        var imgData = img.getImageData(0, 0, 400, 400);
        var data = imgData.data;
        for (var i = 0, j = data.length; i < j; i++) {
            if (i % 4 === 3){
                // added condition for alpha
                data[i] = 255;
            }else{
                // changed to 255
                data[i] = (data[i] + randomValues[i]) % 255;
            }
        }
        img.putImageData(imgData, 0, 0);
    });
}

document.getElementById("bt3").addEventListener("click", function() {
    var img1 = getImageData("c1"),
        img2 = getImageData("c2"),
        ct = getCTX("c3"),
        imgData = ct.createImageData(400, 400),
        data = imgData.data,
        tmp;

    for (var i = 0, j = data.length; i < j; i++) {
        if (i % 4 === 3){
            data[i] = 255;
        }else{
            tmp = img1[i] - img2[i];
            // changed to 255 since ranges go from 0 - 255
            if (tmp < 0){ tmp +=255;};
            data[i] = tmp;
        }
    }

    ct.putImageData(imgData, 0, 0);
});​

//生成一个随机图像
（功能（）{
var ct=getCTX（“c0”）；
var imgData=ct.createImageData（400400）；
var数据=imgData.data；
对于（变量i=0，j=data.length；i

Whee，多么愚蠢的错误+1个用于修复。但这只解决了部分问题，在解码图像后，画布上仍然会随机出现彩色像素。@FB55-Hmm是的，我想我不太确定你试图用上述代码实现什么。我也注意到像素的出现。。但只是假设这就是它的本意。但是我猜如果（tmp<0）tmp+=256，它与这部分代码有关@FB55更新了我的答案，现在效果很好：）。我不得不看视频来理解你在做什么，然后我发现需要做一些小的改变。答案中有相关代码，并对我所做的进行了评论。哎呀，多么愚蠢的错误啊+1个用于修复。但这只解决了部分问题，装饰后画布上仍然随机出现彩色像素