La soluzione è il <canvas> !???

[ossola9]

Buongiorno a tutti,

Ho creato una pagina in html nella quale cliccando su alcuni bottoni si visualizzano immagini diverse in un punto della pagina, componendo un'immagine personalizzata, mi spiego meglio di seguito incollando il codice:

<script language="javascript">
function mostra1() {
document.getElementById("Lev2").style.display="blo ck";
}
function mostra2() {
document.getElementById("Lev3").style.display="blo ck";
}
function mostra3() {
document.getElementById("Lev4").style.display="blo ck";
}
function nascondi() {
document.getElementById("Lev2").style.display="non e";
document.getElementById("Lev3").style.display="non e";
document.getElementById("Lev4").style.display="non e";
}
</script>

<div id="Lev1" style="display:block; position:absolute; left:0px; top:0px; z-index:1">[img]corpo1.png[/img]</div>
<div id="Lev2" style="display:none; position:absolute; left:0px; top:0px; z-index:2">[img]naso1.png[/img]</div>
<div id="Lev3" style="display:none; position:absolute; left:0px; top:0px; z-index:2">[img]naso2.png[/img]</div>
<div id="Lev4" style="display:none; position:absolute; left:0px; top:0px; z-index:2">[img]naso3.png[/img]</div>
<div id="Lev5" style="display:block; position:absolute; left:0px; top:0px; z-index:3">[img]bocca1.png[/img]</div>

<div id="Lev2" style="display:block; position:absolute; left:0px; top:500px; z-index:2">[img]scelta.png[/img]
<map name="Map" id="Map">
<area shape="rect" coords="16,8,269,93" onClick="javascript:nascondi(); mostra1()" />
<area shape="rect" coords="286,9,637,92" onClick="javascript:nascondi(); mostra2()" />
<area shape="rect" coords="649,9,934,94" onClick="javascript:nascondi(); mostra3()" />
</map>
</div>

Del risultato ottenuto volevo dare la possibilità di condividerlo sui vari social network, ma non ci sono riuscito così ho chiesto a voi su un'altra discussione in un'altra sezione del forum e gentilmente "ac_socmel" mi ha suggerito di utilizzare <canvas> di html5. Così ho cercato come utilizzare <canvas> a mio favore, ma non sono riuscito a trovare la soluzione, sapreste suggerirmela Voi?

Vi ringrazio anticipatamente!
Buona giornata.

[Nobody33]

Guarda QUI

[ossola9]

Ciao,
Grazie per il suggerimento Nobody33, ma il problema non è risolto.
Effettivamente manca nel codice, che ho scritto nella precedente discussione, la parte del codice del tasto di condivisione, comunque utilizzo addthis, ed il problema è proprio quì..
Giustamente quando si utilizza il tasto di condivisione lui recupera le immagini della pagina, ma non il risultato della combinazione scelta dall'utente attraverso i tasti di selezioni. pertanto il problema rimane quello di condividere il risultato di più immagini (in parte trasparenti) unite in un unico risultato finale, per questo chiedevo aiuto..avete altri suggerimenti?

[ossola9]

Ciao a tutti, ci ho messo un pò, ma alla fine ho risolto.. vi scrivo la soluzione che ho trovato così se a qualcuno capita la stessa esigenza può prendere spunto.

Per prima cosa mi sono appoggiato a questi 2 siti:
http://html2canvas.hertzen.com/
http://www.kubilayerdogan.net/?p=304

Così il codice si è trasformato in:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>

<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>

<input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" />

<div id="target">
<table cellpadding="10">
<tr>
<td>
<div id="testdiv" style="display:block; position:absolute; left:0px; top:50px; z-index:1">
<div id="Lev1" style="display:block; position:absolute; left:0px; top:0px; z-index:1">[img]corpo1.png[/img]</div>
<div id="Lev2" style="display:none; position:absolute; left:0px; top:0px; z-index:2">[img]naso1.png[/img]</div>
<div id="Lev3" style="display:none; position:absolute; left:0px; top:0px; z-index:2">[img]naso2.png[/img]</div>
<div id="Lev4" style="display:none; position:absolute; left:0px; top:0px; z-index:2">[img]naso3.png[/img]</div>
<div id="Lev5" style="display:block; position:absolute; left:0px; top:0px; z-index:3">[img]bocca1.png[/img]</div>
</div>

<div id="Lev2" style="display:block; position:absolute; left:0px; top:550px; z-index:2">[img]scelta.png[/img]
<map name="Map" id="Map">
<area shape="rect" coords="16,8,269,93" onClick="javascript:nascondi(); mostra1()" />
<area shape="rect" coords="286,9,637,92" onClick="javascript:nascondi(); mostra2()" />
<area shape="rect" coords="649,9,934,94" onClick="javascript:nascondi(); mostra3()" />
</map>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
function capture() {
$('#target').html2canvas({
onrendered: function (canvas) {
//Set hidden field's value to image data (base-64 string)
$('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
document.getElementById("myForm").submit();
}
});
}
</script>
<script language="javascript">
function mostra1() {
document.getElementById("Lev2").style.display="blo ck";
}
function mostra2() {
document.getElementById("Lev3").style.display="blo ck";
}
function mostra3() {
document.getElementById("Lev4").style.display="blo ck";
}
function nascondi() {
document.getElementById("Lev2").style.display="non e";
document.getElementById("Lev3").style.display="non e";
document.getElementById("Lev4").style.display="non e";
}
</script>
<style type="text/css">
#target {
border: 1px solid #CCC;
padding: 5px;
margin: 5px;
width:950px;
height:500px;
}
h2, h3 {
color: #003d5d;
}
p {
color:#AA00BB;
}
#more {
font-family: Verdana;
color: purple;
background-color: #d8da3d;
}
</style>


La pagina save.php è così compilata:

<?php
//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('img.png', $unencodedData);
?>

<?php
//Show the image
echo '[img]'.$_POST['img_val'].'[/img]';
?>


<div class="addthis_toolbox addthis_default_style addthis_32x32_style" style="position:absolute; top:530;">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=undefined"></script>



ed ecco risolto, in breve, trasformando il contenuto del div in immagine.

Grazie per l'aiuto!

Buon proseguimento!