HTML5 Canvas, JavaScript i operacje na obrazkach

javascript-html5-tutorial.pl

30 kwietnia, 2014

Dominik-W

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ę.