HTML5 Canvas - postać URL rysunku

W tym artykule zajmiemy się przekształcaniem danych grafiki do postaci tekstowej. Postać ta ułatwia zapis danych do pamięci, bazy danych.

W tym celu użyjemy metody:

var dataURL = canvas.toDataURL();

Aby zaś odczytać zawartość URL wystarczy do właściwości src obiektu obrazka przypisać tę zmienna tekstową zawierającej ciąg URL i wyświetlić obrazek za pomocą metody drawImage().

Zobaczmy to na przykładzie:

Przykład

Narysujemy kształt - koło i przekształcimy go do postaci URL, a następnie wyświetlimy zawartość zmiennej tekstowej reprezentującej zawartość Canvas w akapicie pod płótnem.

W przykładzie tym pokazujemy też jak wyświetlić obrazek poprzez odczyt zawartości zmiennej zawierającej ciąg URL.

<html>
<head>
<script>
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		context.arc(150,150,100,0,Math.PI*2,false);
		context.fillStyle = "yellow";
		context.fill();
		context.lineWidth = 5;
		context.strokeStyle = "red";
		context.stroke();
		//zamieniamy zawartość płótna na postać dataURL
		var dataURL = canvas.toDataURL();
		document.getElementById("url").innerHTML = dataURL;		
		//odczytujemy dane dataURL i wyświetlamy obrazek 
		var obrazek = new Image();
		obrazek.onload = function(){
			context.drawImage(this,200,100,100,100);
		}
		obrazek.src = dataURL;

</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
<p id='url'></p>
</canvas>
</body>
</html>