1

我目前正在尝试复制 Douglas Crockfords 演示的“安全原则”中显示的效果。作为使用“One Time Pad”加密密钥两次的风险的演示,他展示了两张图像,用相同的密钥对它们进行加密,然后从另一个中减去一个,导致两个图像同时显示。

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

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

我目前的状态可以在JSFiddle看到,请看一下。

4

1 回答 1

1

更新的演示

首先,您将 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);
});​
于 2012-04-19T14:58:56.790 回答