Javascript Canvas Serialization/Deserialization?

Question

자바 스크립트에서 캔버스 개체를 serialize/deserialize 할 수 있습니까?

Answer 1

canvas.getImageData() 및 .putImageData()를 사용하여 픽셀에 직접 액세스 할 수 있습니다. 서버에 게시하기 위해 canvas.toDataURL()을 사용하여 이미지를 데이터 URL로 serialize 할 수도 있습니다.

이것은 최신 브라우저에서만 작동합니다.

Answer 2

getImageData 메서드 외에도 canvas.toDataURL()을 사용하여 데이터 URL 인코딩 PNG를 가져올 수 있습니다. 문자열로 직렬화해야하는 경우 원시 데이터를 수동으로 문자열로 변환하지 않아도됩니다. 이미지를 만들고 src를 데이터 URL로 설정 한 다음 이미지를 캔버스로 그려서 역 직렬화 할 수 있습니다. 만약 내가 올바르게 기억

[(olliej에 의해 제안) 비동기 로딩을 고려하여 편집.]

function serialize(canvas) { 
    return canvas.toDataURL(); 
} 

function deserialize(data, canvas) { 
    var img = new Image(); 
    img.onload = function() { 
     canvas.width = img.width; 
     canvas.height = img.height; 
     canvas.getContext("2d").drawImage(img, 0, 0); 
    }; 

    img.src = data; 
} 

, 일부 이전 사파리의 버전, 그리고 어쩌면 오페라 toDataURL을 지원하지만하지 않았다 최신 버전 해야 할 것.