Glavni problem vezan za pretvaranje HTML platna u PNG datoteku je taj što HTML platno zapravo nije slika, već dinamički element. To znači da se ne može direktno pretvoriti u slikovnu datoteku kao što je PNG, a da se prethodno ne pretvori u format slike. Da biste to učinili, platno se mora prikazati u međuspremniku izvan ekrana, a zatim izvesti kao slikovni fajl. Ovaj proces može biti komplikovan i dugotrajan u zavisnosti od složenosti platna i njegovog sadržaja. Pored toga, određene karakteristike platna kao što su senke ili gradijenti možda neće biti ispravno prikazane kada se konvertuju u format slike.
To convert a HTML canvas into a PNG file, you can use the <code>toDataURL()</code> method of the canvas element. This method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG).
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL('image/png'); // defaults to png, can also use 'image/jpeg'
</script>
1. Prvi red kreira element platna sa ID-om “myCanvas” i širinom i visinom od 200px i 100px.
2. Drugi red kreira varijablu pod nazivom “canvas” koja pohranjuje HTML element sa ID-om “myCanvas”.
3. Treći red kreira varijablu pod nazivom “dataURL” koja pohranjuje URI podataka koje vraća toDataURL() metodu, koristeći 'image/png' kao parametar tipa (podrazumevano je PNG).
JPEG vs PNG format datoteke za web stranicu
JPEG i PNG su dva najčešća formata slikovnih datoteka koji se koriste na webu. JPEG je format kompresije sa gubitkom, što znači da se neki podaci o slici gube kada se datoteka komprimuje. To ga čini idealnim za fotografije i druge složene slike gdje se neki detalji mogu žrtvovati za manju veličinu datoteke. PNG, s druge strane, je format kompresije bez gubitaka, što znači da se podaci ne gube tokom kompresije. To ga čini idealnim za slike sa oštrim linijama i tekstom, kao što su logotipi ili ikone.
JPEG datoteke su obično mnogo manje od PNG datoteka, što ih čini bržim za preuzimanje i lakšim pohranjivanjem na web serverima. Međutim, možda neće izgledati tako oštro ili jasno kao njihove PNG slike zbog algoritma kompresije s gubicima koji se koristi u JPEG-ovima.
PNG datoteke su veće od JPEG-ova, ali nude slike boljeg kvaliteta s oštrijim linijama i preciznijim bojama. Oni također podržavaju transparentnost što može biti korisno pri kreiranju logotipa ili ikona s prozirnom pozadinom. Međutim, njihovo preuzimanje može potrajati duže zbog njihove veće veličine datoteke u odnosu na JPEG.
Šta je platno
Canvas je HTML element koji se može koristiti za crtanje grafike na web stranici koristeći skript jezike kao što je JavaScript. Koristi se za kreiranje grafikona, animacija, igara i drugog grafički bogatog sadržaja. Element platna ima nekoliko metoda za crtanje staza, okvira, krugova, teksta i dodavanje slika. Takođe ima nekoliko atributa za podešavanje širine i visine površine platna, kao i drugih svojstava kao što je boja pozadine.
Kako pretvoriti HTML platno u PNG
Pretvaranje HTML platna u PNG sliku je relativno jednostavan proces.
1. Kreirajte HTML element platna na svojoj stranici:
2. Nacrtajte nešto na platnu:
var ctx = document.getElementById(“myCanvas”).getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0,0,150,75);
3. Dobijte URL podataka platna:
var dataURL = document.getElementById(“myCanvas”).toDataURL();
4. Pretvorite URL podataka u PNG sliku:
var img = nova slika();
img.src = dataURL;
