JS/HTML5 - 배열의 이미지 데이터로 캔버스 다시 그리기

Question

캔버스에 실행 취소 기능을 구현하려고합니다. 기본적으로 사람들은 캔버스에 그림을 그릴 수 있으며 이전 상태로 복원 할 수 있습니다. 그것이 이론입니다. 함수 draw를 호출 할 때마다 현재 imageData를 저장합니다. 배열 eD (네임 스페이스) .history에 저장됩니다. 드로잉은 imageData를 조작하더라도 잘 동작합니다.

: 지금은 내가 내가 그 모양 취소라는 함수를 사용 사이에서 변경 한 내 변경 사항을 취소하려고하면

editorClass.prototype.draw = function(){ 
    eD.history.push(cD.imageData); 
    cD.context.putImageData(cD.imageData, 0, 0); 
} 

: 여기 내 드로우 기능입니다 (CD는 네임 스페이스 aswell이다)

editorClass.prototype.undo = function(){ 
    var temp = eD.history.pop(); 
    cD.context.createImageData(cD.width,cD.height); //Can leave this out, nothing changes 
    cD.context.putImageData(temp, 0, 0); 
} 

위에서 언급 한 것처럼 작동하지 않습니다. 내가 작업하는 캔버스는 일단 사용자가 사이트를로드하면 만들어집니다. cD.imageData는이 함수에서 비롯됩니다.

editorClass.prototype.getPixels = function(){ 
    cD.imageData = cD.context.getImageData(0, 0, cD.width, cD.height); 
    // get the image data of the context and save them into namespace 
    cD.pixels = cD.imageData.data; 
    // get the pixels 

    cD.pixelsLength = cD.width * cD.height * 4; 
    // precompute the length of the pixel array 
} 

두 개의 네임 스페이스가 모두 표시됩니다. 나는 캔버스에 아주 새로운 해요 때문에, 간단한 질문을 수 있습니다 - 그래서 당신은 개선이있는 경우 : 나는 완강하게 저항 빈 해요, 저를 기입, 나는 '모든 코드를 보지 않고)

감사

Answer 1

을 왜 정확히 당신의 작품이 작동하지 않는지 확실하지 않지만 픽셀 배열과 이미지 데이터 객체가 아닌 putImageData을 수행하려는 것으로 의심됩니다. 여기

Live Demo

그리고

는 관련 코드

var savedData = []; 

undoButt.addEventListener("click", function() { 
    // as long as there is data put it onto the canvas. 
    if (savedData.length > 0) { 
     var imgData = savedData.pop(); 
     drawCtx.putImageData(imgData, 0, 0); 
    } 
}); 

drawCanvas.addEventListener("mousedown", function (e) { 
    // push the current state 
    var imgData = drawCtx.getImageData(0, 0, drawCanvas.width, drawCanvas.height); 
    savedData.push(imgData); 

}); 

그 사용한 것과 같은 개념은, 확실히 작동하는 것 같다입니다 작동 내가 쓴

Heres는 데모.