HTML5 캔버스 - 캔버스에 그리기 컨텍스트를 저장하고 나중에

Question

요구 복원

지금 : 캔버스에 그리기, 저장 히트 (저장 캔버스 상태/그리기 오프라인 - 이미지로하지만하지 않음).
나중에 : 이전에 저장 한 도면으로 캔버스를 열고 다시 그립니다. - 이미지에 수출하는 것은 도움이되지 않습니다 위해

canvas = document.getElementById('can'); 
ctx = canvas.getContext("2d"); 
... 
ctx.beginPath(); 
ctx.moveTo(prevX, prevY); 
ctx.lineTo(currX, currY); 
.... 

나중에 캔버스 상태를 복원하기 위해 다음과 같이

그리기 위해 우리는 일반적으로 코드를 사용합니다.
캔버스를 원래 상태로 복원하여 나중에 도면을 계속 편집하려고합니다.

캔버스 컨텍스트를 내보내고 오프라인으로 저장해야합니다. 어떻게?

Answer 1

가장 좋은 방법은 그림 명령을 저장하고 도면을 수행하는 프록시를 사용하는 것입니다.
프록시에 대한 브라우저 지원이 매우 좋지 않기 때문에 (오늘의 FF 만 해당) 을 사용하거나 Context2D에서 새로운 새로운 WatchedContext 클래스를 빌드하여 프록시를 직접 만들어야합니다.
내가이 짧은 데모의 마지막 솔루션 (WatchedContext 클래스)에 나섭니다 :

이

function WatchedContext(hostedCtx) { 
    this.commands= []; 
    Context2dPrototype = CanvasRenderingContext2D.prototype; 
    for (var p in Context2dPrototype) { 
    this[p] = function(methodName) { 
     return function() { 
      this.commands.push(methodName, arguments); 
      return Context2dPrototype[methodName].apply(hostedCtx, arguments); 
     }  
    }(p); 
    } 
    this.replay=function() { 
    for (var i=0; i<this.commands.length; i+=2) { 
     var com = this.commands[i]; 
     var args = this.commands[i+1]; 
     Context2dPrototype[com].apply(hostedCtx, args); 
    } 
    } 
} 

은 확실히 당신은 다른 방법이 필요할 수도를 (시작/정지 기록, 명확한, ...)

그냥 작은 예 의 사용

var cv = document.getElementById('cv'); 
var ctx=cv.getContext('2d'); 
var watchedContext=new WatchedContext(ctx); 

// do some drawings on the watched context 
// --> they are performed also on the real context 
watchedContext.beginPath(); 
watchedContext.moveTo(10, 10); 
watchedContext.lineTo(100, 100); 
watchedContext.stroke(); 

// clear context (not using the watched context to avoid recording) 
ctx.clearRect(0,0,100,1000); 

// replay what was recorded 
watchedContext.replay(); 

당신은 여기에서 볼 수 있습니다

http://jsbin.com/gehixavebe/2/edit?js,output 

재생이 작동하고 저장된 명령을 재생 한 결과 행이 다시 그려집니다.

오프라인으로 저장하려면 localStorage를 사용하여 로컬로 명령을 저장하거나 AJAX 호출 또는 유사한 용도로 서버에 원격으로 저장할 수 있습니다.