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>
Lupa





© medianauka.pl, 2018-07-11, ART-3568





Polecamy w naszym sklepie

kolorowe skarpetki góra lodowa
Kolorowe skarpetki urodzinowe
Kolorowe skarpetki Kostka
Matematyka konkretna
Kolorowe skarpetki Miasto
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2022 r.