HTML 쿠키에서 캔버스 데이터로드 중

Question

쿠키에서 캔버스 데이터를로드하려고 할 때 문제가 발생하지만 데이터를로드 할 때 다음 오류가 발생합니다. 내가 뭘하려고 오전

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. 

다른 버튼 내가 읽은 후 캔버스에이 데이터를 다시 그려야 할을 누를 때 버튼이 다음 누를 때 쿠키에 캔버스 데이터를 저장합니다. 쿠키를 저장할 때이 내 코드

context.putImageData(canvasRead, 0, 0); 

입니다 :

if (document.getElementById('hdnSwitchButton').getAttribute("Value") == 0) { 
      canvas.style.zIndex = "-2"; 
     } else if (document.getElementById('hdnSwitchButton').getAttribute("Value") == 1) { 
      canvas.style.zIndex = "0"; 
      canvasRead = getCookie("canvas"); 
      if (!canvasRead) { 
       alert('Error: Cannot read canvas!'); 
      } else { 
       context.putImageData(canvasRead, 0, 0); 
      } 
     } 

이가 쿠키를 읽고 오류가 라인에 발생하는 위치 내 initiliase 코드

function getCookie(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for (var i = 0; i < ca.length; i++) { 
     var c = ca[i].trim(); 
     if (c.indexOf(name) == 0) return c.substring(name.length, c.length); 
    } 
    return ""; 
} 

function BrowserButtonClick() { 
    document.getElementById('hdnSwitchButton').setAttribute('Value', 0); 
    canvasSave = context.getImageData(0, 0, aWidth, aHeight); 
    document.cookie = "canvas=" + canvasSave; 
} 

그리고 내 html 캔버스 코드는 다음과 같습니다 :

     <div class="canvas"> 
         <canvas id = "DrawingCanvas"> 
          <p>Unfortunately, your browser is currently unsupported by our web application. We are sorry for the inconvenience. Please use one of the supported browsers listed below.</p> 
          <p>Supported browsers: <a href="http://www.google.com/intl/en_uk/chrome/browser/">Chrome</a>, <a href="http://www.opera.com">Opera</a>, <a href="http://www.mozilla.com">Firefox</a>, <a href="http://www.apple.com/safari">Safari</a>, and <a href="http://www.konqueror.org">Konqueror</a>.</p> 
         </canvas> 
        </div> 

내가 알고 싶은 것은 왜 이런 일이 일어나는가와 문제없이 캔버스에서 캔버스 데이터를로드하는보다 효율적인 방법으로 쿠키에서 내 캔버스를로드하는 방법입니다.

Answer 1

캔버스는 imageData 개체로 정의됩니다.

imageData 객체에는 일련 화되고 저장 된 후 캔버스를 다시 그리는 데 필요한 모든 것이 포함되어 있습니다. imageData는 객체이지만 imageData의 중요한 부분은 캔버스의 모든 픽셀을 나타내는 배열을 보유하는 data 속성입니다.

쿠키에 픽셀 배열을 저장하고 복원하여 캔버스를 다시로드 할 수 있습니다. 대형 메가 바이트 -

하지만이 ... ... 결과 쿠키가 클 가능성이 있다고 말했다 데. 저장할 수있는 작은 이미지 파일을 만드는 이미지 (canvas.toDataURL 사용)로 캔버스 픽셀을 저장하는 것이 좋습니다. 귀하의 질문에 대답하는 어쨌든

, ...

데모 : http://jsfiddle.net/m1erickson/c8Vnf/

저장

• 사용 context.getImageData는 캔버스를 정의하는 imageData의 객체를 얻을 수 있습니다.

• 픽셀 내용은 imageData 객체 (imageData.data)의 RGBA 데이터 배열에 저장됩니다.

• 변환 쿠키 등 해당 문자열 저장 JSON.stringify

• 의 문자열에 해당 배열.

,

• 가 캔버스를 복원하려면 복원 쿠키 문자열을 얻을 다음 JSON.parse으로 배열로 다시 해당 문자열을 변환합니다.

• 밀어 수정 된 캔버스에 다시 객체 imageData의 :

• 가 저장된 픽셀 데이터와 imageData의 객체의 픽셀 데이터 배열 채우기 :

• 사용 context.getImageData는 캔버스를 나타내는 imageData의 객체를 얻을 수 있습니다

코드 저장을위한 :

012 context.putImageData와 복원

코드 :

var savedData=JSON.parse(J); 

var imgData=ctx.getImageData(0,0,canvas.width,canvas.height); 

var data=imgData.data; 

for(var i=0;i<data.length;i++){ 

    data[i]=savedData[i]; 

} 

ctx.putImageData(imgData,0,0);