페이지로드 사이에 캔버스 저장

Question

html5 로컬 저장소를 사용하여 페이지 새로 고침 사이에 캔버스를 저장하려고했지만 캔버스가 페이지를 새로 고침 할 때 항상 비어있게됩니다.

HTML

  <canvas onload="loadCanvas()" onClick="canvas(event)" id="myCanvas" width="400" height="400"> 
       Your browser does not support the canvas element 
      </canvas> 

자바 스크립트 : 뭔가 캔버스

누구든지 문제가 무엇인지 알고에 drawed 된 경우

function saveCanvas() { 
var c = document.getElementById("myCanvas"), 
    ctx = c.toDataURL(); 

if (typeof (localStorage) !== "undefined") { 

    localStorage.setItem('myCanvas', ctx); 
} else { 
    document.getElementById("save").innerHTML.dataURL = "Local Storage not supported"; 
} 
} 

function loadCanvas() { 

var image = localStorage.getItem('myCanvas'); 

document.getElementById('myCanvas').src = image; 
} 

saveCanvas 함수가 호출됩니다?

이가 해결

,에 onLoad는

Answer 1

로컬 스토리지 만, 즉, 너무 많이 절약 할 수 있습니다 캔버스에서 작동하지 않았다. 대부분의 브라우저에서 5MB와 다른 브라우저에서는 더 적습니다.

또 다른 경고는 유니 코드로 인해 저장되는 각 문자가 2 바이트를 차지하므로 실용적인 측면에서 보면 저장 공간이 실제 절반에 불과하다는 것입니다. 표준에 의해 정의되지 않은 크기에 대한 보증은 없습니다. 5 MB는 제안 사항 일 뿐이므로 브라우저는 모든 크기를 사용할 수 있습니다.

기본 형식이 toDataURL()이므로 이미지를 PNG 형식으로 표시합니다. 생성 된 data-uri가 너무 큰 경우 (여기서 base-64가 작은 머리글 + 크기에 33 %를 추가 할 가능성이 높습니다) 브라우저에 따라 저장 내용이 잘 리거나 실패합니다.

데이터 유티를 무효화하려고 시도 할 때 캔버스가 비어있는 이유는 캔버스의 크기 또는 결과 데이터 (예 : uri)를 표시하지 않기 때문일 수 있습니다.

대신 JPEG로 저장하려고 할 수 있습니다 : 당신은 (당신이 저장소 할당량을 요청할 수 있습니다) 인덱스 DB와 같은 다른 로컬 스토리지 메커니즘을 조사해야합니다이 후 작동하지 않는 경우

dataUri = c.toDataURL('image/jpeg', 0.5); /// 0.5 is quality, higher is better 

또는 파일 API (하지만이 기능은 현재 Chrome에서만 지원됩니다). 또한 잠시 동안 사용되지 않을 비표준 웹 SQL이 있습니다.

업데이트 또한

창으로 캔버스 요소로부터 온로드를 이동하려고 여기 제안 코드에서 ID로 (당신이 캔버스 요소에 src을 설정할 수 없습니다 :

window.onload = function() { 
    var image = localStorage.getItem('myCanvas'); 
    document.getElementById('myCanvas').src = image; 
} 

참고 뿐만 아니라 귀하의 예제 코드 쇼). 이를 위해 이미지 요소가 필요합니다. 당신은 또한 이미지에 onload 핸들러를 사용할 필요가 이미지에 src을 설정하면, 그래서 예 수 :

이

window.onload = function() { 
    var img = new Image; 
    img.onload = function() { 
     var ctx = document.getElementById('myCanvas').getContext('2d'); 
     ctx.drawImage(img, 0, 0); 
     /// call next step here... 
    } 
    img.src = localStorage.getItem('myCanvas'); 
} 

보통 내가 제안 (다른 사람이 스레드에서 너무 한) 사람들이 그들의 그림을 저장 점 및 모양 유형을 객체의 배열로 배열 한 다음 localStorage에 저장하는 문자열로 직렬화합니다. 렌더링 단계에서 좀 더 많은 코드가 필요합니다 (어쨌든 캔버스가 어떤 이유로 비어있을 때 캔버스를 업데이트해야하지만).