HTML5: Introducere în Canvas, partea a II-a

Continuând introducerea în Canvas prezentată anterior, în acest scurt tutorial vom învăța cum să adăugăm o imagine pe planșa HTML5, cum să transformăm suprafața <canvas> într-un string base64, iar mai apoi, cu puțin ajutor din partea PHP, vom salva planșa ca imagine în format .PNG.

Să trecem la treabă. Codul integral îl găsiți la sfârșitul articolului, așa cum v-am obișnuit.

1. Ce am învățat deja

În articolul precedent, am stabilit noțiunile de bază în formatarea elementului <canvas>, ne-am acomodat cu contextul planșei, am setat o culoare de fundal și am adăugat două stiluri diferite de text acesteia. Ce nu am învățat însă este cum să adăugam imagini în planșa noastră 2D.

2. new Image();

Pentru a folosi o imagine în Canvas, în primul rând trebuie să o definim:

var img    = new Image();
img.src    = 'logo.png'; //definim locatia imaginii

Pentru a ne asigura că imaginea pe care dorim să o folosim a fost încărcată complet și este pregătită de utilizare atunci când vrem să rulăm funcția de desenare a imaginii, metodele Canvas vor fi executate în interiorul evenimentului onload atașat imaginii:

img.onload = function() {
...
}

Pentru început, vom defini culoarea de fundal a planșei:

img.onload = function() {
	context.fillStyle = '#f5f5f5';
	var startFillFromLeft  = '0';
	var startFillFromTop   = '0';
	var fillWidth          = canvas.width;
	var fillHeight         = canvas.height;
	context.fillRect(startFillFromLeft, startFillFromTop, fillWidth, fillHeight);
}

După ce culoarea de fundal a fost aplicată, vom folosi metoda drawImage() pentru a adăuga imaginea în planșă:

var imgWidth  = 370; //latimea imaginii
var imgHeight = 72;  //inaltimea imaginii
var x = canvas.width/2 - imgWidth/2; //pozitionarea orizontala in plansa - centrat
var y = canvas.height/2 - imgHeight/2; //pozitionarea verticala in plansa - centrat
context.drawImage(img, x, y);

drawImage() acceptă ca parametri imaginea de folosit, axele x și y pentru poziționarea acesteia și, opțional, înălțimea și lățimea imaginii și cele 4 coordonate de secționare (clipping) a imaginii. Mai multe detalii găsiți aici.

În continuare, vom adăuga și linia de text, centrată orizontal, 10px sub imaginea de mai sus:

context.font         = 'normal bold 11px Arial';
context.textAlign    = 'center';
context.textBaseline = 'middle';
context.fillStyle    = '#333';
var text      = 'Ctrl-D este o revista colectiva digitala dedicata tuturor celor pasionati de design, development sau digital.';
var alignLeft = canvas.width/2;
var alignTop  = canvas.height/2 + imgHeight/2 + 10;
context.fillText(text, alignLeft, alignTop);

3. Canvas to Base64

Algoritmul base64 este o formă de criptare a datelor din format binar în format text, folosit (printre altele) pentru a transfera diferite date fără necesitatea stocării fizice a acestora. În cazul nostru, acest cod reprezintă datele obținute din elementul <canvas>.

Pentru a putea obține codul base64 al planșei, vom folosi metoda toDataURL(), iar astfel îl vom salva ca variabilă JavaScript:

var data = canvas.toDataURL(); //returneaza imaginea encodata in base64

String-ul base64 al unei imagini poate fi folosit direct ca atribut src al tag-ului <img/> și poate fi vizualizat direct în fereastra browser-ului pentru o vizualizare rapidă a ceea ce conține string-ul.

Atenție: în cazul în care imaginea folosită în planșă provine dintr-o sursă externă domeniului pe care executăm script-ul sau în cazul în care executăm script-ul într-un mediu local (fără un localhost), nu vom putea obține acest string. (mai multe despre SECURITY_ERR: DOM Exception 18)

Odată obținut, o funcție PHP ne poate ajuta să transformăm string-ul base64 într-un format tip imagine, pentru ca apoi să salvăm imaginea pe un server.

4. Download.php

Pentru a putea executa acest cod veți avea nevoie de un server ce rulează PHP.

Vom începe prin a realiza un fișier nou, denumit generic download.php, în care vom scrie următorul cod:

<?php
$q       = $_POST['data'];
$img     = str_replace('data:image/png;base64,', '', $q);
$img     = str_replace(' ', '+', $img);
$data    = base64_decode($img);
$file    = time().'.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

Pentru a face acest exemplu mai ușor de înțeles, voi include librăria jQuery, iar către fișierul PHP vom trimite o cerere de tip AJAX POST folosind un cod de forma:

var imageData = canvas.toDataURL();
$.post('download.php', {data : imageData})
	.done(function( response ){
$('<p>Imaginea a fost salvata cu succes. <a href="' + response + '" target="_blank">Click aici pentru a o vizualiza.</a></p>').appendTo('body')
});

Funcția va trimite string-ul Base64 către fișierul PHP, care va procesa datele obținute din el în format .PNG și va salva imaginea pe server, în folderul ce conține fișierul download.php.

Cam așa se termină tutorialul de astăzi.

Să recapitulăm: am adăugat o imagine și o linie de text în planșa <canvas>, am formatat poziționarea acestora, după care am obținut string-ul base64 al planșei pe care l-am trimis unui fișier PHP ce a salvat conținutul planșei în format .PNG. Simplu, nu? Acum puteți experimenta mai departe.