Canvas teszt

A getImageData() metódus megköveteli, hogy a kép a saját web-szerveren, azonos tartományban legyen a kód futtatása során! Ha ez a feltétel nem teljesül, "SECURITY_ERROR" kivétel fog keletkezni!

"Képfájl" Canvas-ra saját szerverről

(Későbbi megjelenítéshez "Image Data URL" *.txt fájlba mentése)

Ahhoz, hogy vászonterületen a képadatok minden pixeljét megkapjuk, a getImageData() metódus kell meghívni, és tárolni a pixel adatokat. Minden pixel négy komponensből áll (piros, zöld, kék, és alfa komponens). Három művelet az objektum pixel adatainak eléréséhez:
- iteráció összes képpontra, kezdve a bal felső saroktól a jobb alsó sarokig
- pixel adatok kinyerése az x, y koordinátákra
- iteráció összes képpontra, miközben követi az x, y koordinátákat minden egyes pixel

"Képfájl" Canvas-ra idegen szerverről

Az idegen szerveren lévő képfájl felhasználásához szükséges "kinyer.php" és a dataURL *.txt fájlba történő mentéséhez szükséges "beir.php" forráskódja:

<?php
if(isset($_POST["imageData"]) && !empty($_POST["imageData"]) &&
   isset($_POST["outFile"]) && !empty($_POST["outFile"]))
{ $dataURL = $_POST["imageData"]; $imgFile = $_POST["outFile"]; file_put_contents($imgFile, $dataURL); }
?>
<?php
if(isset($_GET["inFile"]) && !empty($_GET["inFile"]) )
{ 
  $homepage = file_get_contents($_GET["inFile"]); $imgFile = "eredeti1.png";
  file_put_contents($imgFile, $homepage); echo $imgFile;
}
?>

"Képfájl" Canvas-ra "Grayscale" átalakítással

A fekete-fehér a kép színeinek a létrehozásához végig haladunk az összes pixelen, kiszámítjuk a fényerőt mindegyikre, majd beállítjuk a vörös, zöld és kék összetevők mindegyikét azonos fényerőre.

"Képfájl" Canvas-ra színfordító átalakítással

Megfordíthatóak a kép színei is, ha végig haladunk az összes pixelen, és a piros, zöld és kék összetevők esetében minden egyes értéket kivonunk a maximális színértékből (255). Az új adatokkal a kép frissítését, azaz a "színfordított" képet a putImageData() függvénnyel hozzuk létre.

Canvas "Image Data URL" lekérdezés

Ahhoz, hogy a "Canvas"-on lévő képadatokat fel tudjuk használni, a toDataURL("image/png") metódus szükséges, amely átalakítja egy 64 bites kódolású PNG URL formára. Ha szeretnénk, hogy a "képadatok URL" jpeg formátumban legyen, akkor canvas.toDataURL("image/jpeg") első paraméter kell. Ha szeretnénk ellenőrizni a képminőséget egy JPEG képnél, akkor a második paraméternek egy számot 0-1 között kell megadni canvas.toDataURL("image/jpeg", 0.5). A visszatérési érték string.

Canvas-ra betöltés, megjelenítés "*.txt" fájlba mentett dataURL-ből

Betölteni canvasra képadatokat URL-ből úgy lehet, hogy egy AJAX hívással az adott URL-ből létrehozunk egy kép objektumot, majd felvisszük a képet a canvasra a drawImage() metódussal.

HTML5 Canvas tesztek