Logo Media Nauka

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




 




© Media Nauka 2008-2018 r.