2010-07-31 10 views
17

를 사용하여 나는 스크립트를 시작합니다 :캔버스의 drawImage 데이터 URL


    function saveInstance() { 
    _savedInstance = document.getElementById('canvasID').toDataURL(); 
    } 
    function restoreInstance() { 
    ctx.drawImage(_savedInstance,0,0); 
    } 

목적은 캔버스의 인스턴스를 저장하고 ctx.save()을 저장하는 방법 나중에 [유사를 다시 적용하는 것입니다 스타일과 변형].

그러나 호환되지 않는 유형 (캐치 오류 : TYPE_MISMATCH_ERR : DOM 예외 17)이라는 오류가 나타납니다. 인스턴스를 다시 그릴 때 데이터 URL 문자열을 사용할 수있는 캔버스 메서드가 있습니까?

**이 저장/복원 아이디어를 구현하는 더 좋은 방법이 있다면, 그 또한 크게 감사 할 것입니다.

-Firstmate 것은

답변

18

예, _savedInstance 등의 소스와 이미지 요소를 만든 다음 캔버스에 그릴 수 있습니다.

var img = new Image(); 
img.src = _savedInstance; 
ctx.drawImage(img,0,0); 
+1

예, 당신은 또한뿐만 아니라 캔버스/비디오 요소에서 그릴 여기에 사양을 볼 수 http://www.whatwg.org/specs/web-apps/current-work/multipage/the- canvas-element.html # dom-context-2d-drawimage – peol

+0

매력처럼 작동했습니다! Peol 링크 덕분에 프로젝트 XD – Firstmate

+0

의 다른 부분에도 도움이됩니다. Chrome에서이 문제도 확인하십시오. http://code.google.com/p/chromium/issues/detail?id=57941 – Vanuan