Serializacja/deserializacja Javascript Canvas?

Question

Czy można serializować/deserializować obiekt canvas w javascript?

Answer 1

Możesz uzyskać bezpośredni dostęp do pikseli za pomocą canvas.getImageData() i .putImageData(). Można także serializować obrazy do adresu URL danych za pomocą canvas.toDataURL() w celu opublikowania na serwerze.

Działa to tylko w nowszych przeglądarkach.

Answer 2

Oprócz metody getImageData można użyć formatu canvas.toDataURL(), aby uzyskać PNG z zakodowanym danymi. Jeśli chcesz serializować do ciągu znaków, zaoszczędziłoby to konieczność ręcznego przekonwertowania nieprzetworzonych danych na ciąg. Można deserializować, tworząc obraz i ustawiając src na adres URL danych, a następnie przeciągając go na płótno.

[Edytowane aby uwzględnić obciążenia asynchronicznym (sugerowane przez 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; 
} 

Jeśli dobrze pamiętam, niektóre starsze wersje Safari i Opera nie może wspierać toDataURL, ale nowsze wersje zrobić.