Creare immagini con html

Ciao a tutti. Innanzi tutto capisco che il titolo non è molto chiaro, ma non sapevo come dirlo meglio. Oggi ho creato uno script che consiste nello scegliere tra varie immagini e sovrascriverle. Il problema mi si pone adesso nell'esportare l'immagine così creata. Qualcuno sa aiutarmi?

[karl94]

Puoi indicare il codice dello script che hai prodotto fin'ora?

Certo! Eccolo!

<style>
#background{
background-image:url('img/card.png');
height: 510px;
width: 330px;
}

#pergamen{
background-image:url('img/pergamen.png');
position: absolute;
height: 510px;
width: 330px;
}

#title{
background-image:url('img/title.png');
position: absolute;
height: 510px;
width: 330px;
}

#macchia{
background-image:url('img/macchia.png');
position: absolute;
height: 510px;
width: 330px;
}

#titleText{
position: absolute;
margin-top:20px;
margin-left:25px;
}

#descriptionText{
position: absolute;
margin-top:320px;
margin-left:30px;
width: 270px;
text-align:justify;
}

#infoText{
position: absolute;
margin-top:290px;
margin-left:30px;
width: 270px;
text-align:center;
font-weight:bold;
}

#image{
position: absolute;
margin-left:25px;
margin-top:35px;
text-align:center;
font-weight:bold;
}
</style>

<table align="center">
  <tr>
    <td>
	  <div id="background">
	    <img id="image" src="img/image.png" height="260" width="280" />
	    <div id="pergamen">
		  <div id="title">
		    <div id="macchia">
		      <div id="titleText"></div>
			  <div id="infoText"></div>
			  <div id="descriptionText"></div>
			</div>
		  </div>
		</div>
	  </div>
	</td>
	<td>
	<td>
	
	  <table>
        <tr>
          <td>Nome:</td>
          <td><input onKeyUp="document.getElementById('titleText').innerHTML = this.value" /></td>
        </tr>
        <tr>
          <td>Tipo:</td>
          <td><input onKeyUp="document.getElementById('infoText').innerHTML = this.value" /></td>
        </tr>
        <tr>
          <td>Immagine:</td>
          <td><input onKeyUp="document.getElementById('image').src = 'images/'+this.value" /></td>
	    </tr>
        <tr>
          <td>Descrizione:</td>
          <td><textarea onKeyUp="if(this.value != ''){document.getElementById('descriptionText').innerHTML = this.value}"></textarea></td>
        </tr>
      </table>
	
	</td>
  </tr>
</table>

[karl94]

Farlo usando solo Javascript non è impossibile, ma dovresti usufruire delle API messe a disposizione da HTML5, che è ancora una bozza, dunque non ancora largamente implementate e soggette a variazioni. La cosa migliore sarebbe inviare i dati ad una pagina PHP che generi l'immagine.

Si quindi addio lato client, giusto? Comunque. Puoi darmi qualche dritta per farlo in php?

[karl94]

Se proprio vuoi puoi fare il doppio sistema: se il browser supporta le API, l'immagine viene prodotta lato client, altrimenti viene spedito tutto al server e se ne occupa lui.
Per realizzare lo script in PHP dovresti usare le funzioni delle librerie apposite: http://www.php.net/manual/en/refs.utilspec.image.php.

E se il browser supporta le API, quindi come faccio?

(Grazie dell'aiuto che mi stai dando^^)

[karl94]

E se il browser supporta le API, quindi come faccio?

(Grazie dell'aiuto che mi stai dando^^)

Devi usare l'elemento canvas, trovi una breve descrizione su Wikipedia e un buon tutorial nell'MDN.