캔버스에서 잘못된 픽셀 데이터 가져 오기

Question

1) base64 이미지 데이터가 있습니다.이 이미지는 캔버스 내부의 이미지로 그리는 데 사용되었습니다. 나중에베이스 64로 다시 가져 와서 다른 서비스로 보내고 (저장소에 이미지 파일로 저장) 이미지를 만들었습니다.

2) 다른 페이지에서이 이미지를 base64로 다시로드하고 내부 캔버스를 그립니다. 모든 렌더링 부분이 잘 보이고 완벽하게 작동합니다.

그러나 Uint8ClampedArray의 (1)은 (2)의 경우와 달랐습니다. 아니면 이것은 예상 된 행동입니까? 여기 내 코드입니다 :

/** first part **/ 
var img = new Image(); 
img.src = 'data:image/jpeg;base64,' + data.result; 
// wait for image finish load 
// then draw image into canvas 
img.onload = function() { 
    // draw cover image into canvas 
    // ctx is just canvas context 
    ctx.drawImage(img, 0, 0); 
    // clampedArray is just a normal variable 
    clampedArray = ctx.getImageData(0, 0, canvas.height, canvas.width); 
    console.log(clampedArray.data); //<----------------------- (1) 
    var base64Image = secret.toDataURL('image/jpeg'); 
    // sending base64Image to another services 
} 

/** second part/another page **/ 
var img = new Image(); 
img.src = 'data:image/jpeg;base64,' + data.result; 
img.onload = function() { 
    ctx.drawImage(img, 0, 0);    
    clampedArray = ctx.getImageData(0, 0, coverAfter.height,coverAfter.width); 
    console.log(clampedArray.data); //<----------------------- (2) 
} 

data.result 반환 같은 base64로,하지만 때 모두 내가 console.log (1), (2), 나는 다른 결과를 얻었다 (Uint8ClampedArray)

Answer 1

나는 두 가지를 추측하고있어 base64 문자열은 이 아니며이 아닙니다. secret.toDataURL('image/jpeg')을 실행하면 원래의 JPEG 이미지가 다시 인코딩되며, (most likely)은 이미지를 약간 변경합니다. 따라서 base64Image은 원래 data.result과 같지 않습니다.