Question

I’m currently trying to replicate the effect shown in Douglas Crockfords presentation Principles of Security. As a demonstration of the risk of using “One Time Pad” encryption keys twice, he shows two images, encrypts them with the same key and subtracts the one from the other, resulting in both images shown at the same time.

My approach uses four canvas elements, one for showing the key, two for loading images and the fourth as the destination for the subtraction. I’m able to generate a (somewhat) random key, load images and encrypt them. Problems start when trying to decrypt an image. For that, I’m loading an image to the first container, encrypt it, then encrypt the second container (which results in a copy of the key) and then subtract the pixels of both containers. The original image is still recognizable, but random pixels appear on the canvas.

When loading an image to the second container, one should be able to get an inverted version when subtracting it from the empty first container. Unexpectedly, the canvas stays blank.

My current state is viewable at JSFiddle, please have a look.

Answer 1

Updated Demo

First you were setting the alpha to 255, but then continued on and subtracted the data still, so you subtracted the alpha channel regardless of the fact you already set it to 255. All I had to do was make it conditional.

Then you had the values go to 256, but the ranges are 0-255. Last but not least you needed another alpha conditional in the generate portion.

//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);
});​