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!
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
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; } ?>
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.
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.
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.
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.