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?

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

Certo! Eccolo!

Codice HTML:

---

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

---

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?

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^^)

Citazione:

---

Originalmente inviato da enkantar

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.