캔버스에 예기치 않은 색상이 표시되고 거꾸로 된 이미지가 표시되지 않습니다.

Question

더글러스 크로크 포드 프리젠 테이션 Principles of Security에 표시된 효과를 복제하려고합니다. "One Time Pad"암호화 키를 두 번 사용하는 위험을 입증하기 위해 두 개의 이미지를 표시하고 두 개의 이미지를 동일한 키로 암호화 한 다음 두 이미지를 동시에 뺀 이미지를 표시합니다.

내 접근 방식은 4 개의 캔버스 요소를 사용합니다. 하나는 키 표시 용이고 두 개는 이미지로드 용이고 두 번째는 빼기 대상입니다. 나는 (다소) 무작위 키를 생성하고 이미지를로드하고 암호화 할 수있다. 이미지 해독을 시도 할 때 문제가 발생합니다. 이를 위해 첫 번째 컨테이너에 이미지를로드하고 암호화 한 다음 두 번째 컨테이너를 암호화 한 다음 키의 복사본을 생성 한 다음 두 컨테이너의 픽셀을 뺍니다. 원본 이미지는 인식 할 수 있지만 임의의 픽셀이 캔버스에 나타납니다.

이미지를 두 번째 컨테이너에로드 할 때 빈 첫 번째 컨테이너에서 이미지를 빼낼 때 반전 된 버전을 가져올 수 있어야합니다. 예기치 않게 캔버스가 비어 있습니다.

현재 나의 상태는 JSFiddle로 볼 수 있습니다. 에 관계없이 이미 255 내가 가진 모든으로 설정 사실의 알파 채널을 뺄 수 있도록

Answer 1

Updated Demo

먼저 당신은 여전히 ​​데이터를 255에 알파를 설정하지만, 다음에 계속 차감 한 조건부로 만들었습니다.

값을 256으로 설정했지만 범위는 0-255입니다. 마지막으로, 생성 부분에 또 다른 알파 조건이 필요했습니다.

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