
Swego czasu dostaliśmy małe zadanie, którego przedmiotem było rozeznanie się i stworzenie podstaw edytora zdjęć online, na których można by operować z poziomu JS (więc i Canvas), a następnie przesyłać je w sieci. Dzisiaj prezentujemy podstawowe elementy i kilka przykładów z rozważań nad tym projektem.
JavaScript, obrazki i HTML5 Canvas
Podstawowo będziemy potrzebować (wszystkie biblioteki dołączone są w przykładzie do pobrania):
– zaawansowane biblioteki JavaScript: base64.js, canvas2image.js, jsmanipulate.js,
– pliki PHP, w których będziemy uruchamiać i przetwarzać przykładowy kod,
– obrazki (jpg, png), na których będziemy operować.
Czynności, które wykonamy to:
1. Wczytanie obrazka z pliku JPG lub PNG do elementu HTML5 Canvas (lub rysowanie prostego obrazka bezpośrednio metodami Canvas)
2. Wykonanie jakichś operacji graficznych na tym obrazku
3. Pobranie zmodyfikowanej zawartości z Canvas tak, aby można było zapisać ją w pliku
Trzeci punkt był tu najważniejszy, ponieważ kluczową kwestią była zamiana zmodyfikowanej zawartości wczytanej z pliku, która znajdowała się w elemencie HTML5 Canvas, ponownie na poprawny plik w odpowiednim formacie.
Cała magia wykonywana była poprzez:
var strDataURI = oCanvas.toDataURL(); // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgA..."
Metoda ta zwraca zawartość Canvas jako data: URI, co pozwala na dalsze operacje, takie jak konwersja i zapis tych danych w postaci pliku końcowego.
Taki ciąg danych może zostać użyty bezpośrednio jako atrybut źródła obrazka i wyświetlony w przeglądarce:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA... " />
Przejdźmy do praktyki.
Przykłady kodu
Przejrzymy teraz elementy skryptów testowych.
Przykład – elementy UI:
... <div id="wrapper"> <canvas id="cnv" width="200" height="200"></canvas> <br /><br /> <div id="tb"><button onclick="testing()">Test</button></div> </div> ...
Przykładowy kod JavaScript:
var canvas = document.getElementById('cnv'); if (canvas.getContext) { var context = canvas.getContext('2d'); // simple drawing on canvas context.beginPath(); context.moveTo(75,25); context.quadraticCurveTo(25,25,25,62.5); context.quadraticCurveTo(25,100,50,100); context.quadraticCurveTo(50,120,30,125); context.quadraticCurveTo(60,120,65,100); context.quadraticCurveTo(125,100,125,62.5); context.quadraticCurveTo(125,25,75,25); context.stroke(); } else { alert('Error in canvas context loading'); } // the handler function testing() { // save data as PNG (default) var strDataPng = canvas.toDataURL(); // alert(strDataPng); var my_url = "processor_png.php"; $.ajax({ type: "POST", url: my_url, data: { filecode: strDataPng } }).done(function( msg ) { alert("PNG file saved!"); }); // ... }
W tym przykładzie rysujemy zupełnie nowy obrazek, jedynie za pomocą metod HTML5 Canvas. Następnie dane tego obrazka pobieramy i przesyłamy poprzez AJAX do skryptu PHP, który zajmie się zapisaniem tych danych do pliku.
Oto prosty przykład takiego skryptu PHP:
... if (isset($_POST["filecode"])) { // $imageData = $GLOBALS['HTTP_RAW_POST_DATA']; $imageData = $_POST["filecode"]; // cleanups $filteredData = substr($imageData, strpos($imageData, ",") + 1); // decode right data $unencodedData = base64_decode($filteredData); // output $fp = fopen("tests/file_png.png", "wb"); fwrite($fp, $unencodedData); fclose($fp); } ...
Kod ten pobiera i dekoduje dane, po czym zapisuje je do pliku.
Przykłady on-line:
– test pliku JPG
http://directcode.eu/samples/html5_canvas_mod_script_js_blog/test_jpg.php
– test pliku PNG
http://directcode.eu/samples/html5_canvas_mod_script_js_blog/test_png.php
Przykłady do pobrania:
https://github.com/dominik-w/js_html5_com/tree/master/html5_canvas_mod_script_js_blog
Podsumowanie
To wszystko na dziś. Mam nadzieję że udało mi się zaciekawić kogoś omawianymi zagadnieniami, lub przynajmniej pomóc rozwiązać problem z przetwarzaniem i zapisywaniem do pliku danych z elementu HTML5 Canvas.
Dziękuję za uwagę.