conversione testo in immagine

[pepemusic]

salve a tutti sono nuovo del forum e spero tanto di poter trovare aiuto, sicuramente qui ne sapete molto più di me e quindi confido in voi, mi scuso in anticipo se commetto degli errori in base alle regole del forum...
sul mio sito ho esigenza di far visualizzare del testo dinamico ma mi interessa renderlo tipo immagine, dopo tantissime ricerche sono riuscito a trovare questo script ma non riesco in nessun modo ad evitare il <textarea>, mi spiego:
vorrei che il valore di una variabile venga elaborata dallo script, come faccio?
vi posto lo script, vi prego aiutatemi che sto diventando scemo

<style type='text/css'>
canvas{
border: 1px black solid;
}
#textCanvas{
display: none;
}
</style>


<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');

document.getElementById('testo').addEventListener('keyup', function (){
tCtx.canvas.width = tCtx.measureText(this.value).width;
tCtx.fillText(this.value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
console.log(imageElem.src);
}, false);

}//]]> 
</script>


<canvas id='textCanvas' height='20'></canvas>
<img id='image'>
<br>
<textarea id="testo"></textarea>

 

[helpdesk]

Ciao, non ho capito, vorresti il testo tipo immagine o vuoi fare elaboarare il valore di una variabile?

 

[pepemusic]

Ciao, non ho capito, vorresti il testo tipo immagine o vuoi fare elaboarare il valore di una variabile?

Si, praticamente lo script che ho inviato fa proprio questo, solo che per attivare la funzione javascript, in questo caso devo prima digitare nel textarea, ed in questo caso la variabile sarebbe l'ID="testo"... io invece nella pagina che sto realizzando, ottengo una variabile da uno script ASP che prende i dati da un database, quindi vorrei combinare questo script ma non riesco ad attivare la function javascript... per farla facile, facciamo finta che non c'è il textarea ma una variabile tipo var testo="quello che voglio convertire" come fareste voi a farlo funzionare?

spero propio che qualcuno mi indichi la luce in fondo al tunnel

 

[criric]

Ciao, puoi fare cosi

<script type='text/javascript'>
    window.onload=function(){
        
        var testo = "Testo";
        
        var tCtx = document.getElementById('textCanvas').getContext('2d'),
        imageElem = document.getElementById('image');        
        tCtx.canvas.width = tCtx.measureText(testo).width;
        tCtx.fillText(testo, 0, 10);
        imageElem.src = tCtx.canvas.toDataURL();
        console.log(imageElem.src);
   }
</script>

 

[pepemusic]

Ciao, puoi fare cosi

<script type='text/javascript'>
    window.onload=function(){
        
        var testo = "Testo";
        
        var tCtx = document.getElementById('textCanvas').getContext('2d'),
        imageElem = document.getElementById('image');        
        tCtx.canvas.width = tCtx.measureText(testo).width;
        tCtx.fillText(testo, 0, 10);
        imageElem.src = tCtx.canvas.toDataURL();
        console.log(imageElem.src);
   }
</script>

provo subito, grazie

 

[pepemusic]

Grazieeeeeee!!!

provo subito, grazie

Non so proprio come ringraziarti, stavo impazzendo, mi hai risolto un problema per me veramente importante... Genio!!!!

 

[pepemusic]

Altro piccolo quesito.

Grazie a criric ho risolto il precedente problema, anzi!
adesso però mi sono accorto che il testo della variabile viene riprodotto solo in orizzontale, tutto su un unica riga, come faccio ad indicare che deve andare a capo ad un tot di caratteri?

 

[criric]

diciamo che oggi tendo in generale a complicarmi la vta ( sarà per il tempo )
puoi provare questa soluzione

<style type='text/css'>
    canvas{
        border: 1px black solid;
    }
    #textCanvas{
        display: none;
    }
</style>

<canvas id='textCanvas'></canvas>
<img src="" id='image' alt="image">

<script type='text/javascript'>
    window.onload=function(){
        
        var testo = "Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura che' la diritta via era smarrita.";
        testo += " Ahi quanto a dir qual era e' cosa dura esta selva selvaggia e aspra e forte che nel pensier rinova la paura!";
        
        var tCtx = document.getElementById('textCanvas').getContext('2d');
        imageElem = document.getElementById('image');        
        tCtx.canvas.width = tCtx.measureText(testo).width;
        
        var acapo = 7; // ogni quante parole deve iniziare una nuova riga
        var conta = 0; // contiamo le parole
        var riga = ""; // riga da stampare
        var h = 10; // altezza riga
        var parole = testo.split(" "); // esplode il testo in un array di parole
        // ciclo dell array
        for(var i in parole) {
            // ricostruiamo la riga
            riga += parole[i] + " ";
            // incrementiamo il contatore
            conta++;
            // se è ora di andare a capo
            if(conta == acapo) {
                // stampiamo la riga
                tCtx.fillText(riga, 0, h);
                // azzeriamo i parametri
                riga = "";
                conta=0;
                // incrementiamo l'altezza
                h+=10;
            }          
        }
        // stampiamo l'ultima riga
        tCtx.fillText(riga, 0, h);
        
        imageElem.src = tCtx.canvas.toDataURL();
    }
</script>

ho commentato non credo servano altre spiegazione al massimo chiedi pure

 

[criric]

Internet explorer pero non supporta il canvas percio non funziona

 

[pepemusic]

Perfetto!!!

diciamo che oggi tendo in generale a complicarmi la vta ( sarà per il tempo )
puoi provare questa soluzione

<style type='text/css'>
    canvas{
        border: 1px black solid;
    }
    #textCanvas{
        display: none;
    }
</style>

<canvas id='textCanvas'></canvas>
<img src="" id='image' alt="image">

<script type='text/javascript'>
    window.onload=function(){
        
        var testo = "Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura che' la diritta via era smarrita.";
        testo += " Ahi quanto a dir qual era e' cosa dura esta selva selvaggia e aspra e forte che nel pensier rinova la paura!";
        
        var tCtx = document.getElementById('textCanvas').getContext('2d');
        imageElem = document.getElementById('image');        
        tCtx.canvas.width = tCtx.measureText(testo).width;
        
        var acapo = 7; // ogni quante parole deve iniziare una nuova riga
        var conta = 0; // contiamo le parole
        var riga = ""; // riga da stampare
        var h = 10; // altezza riga
        var parole = testo.split(" "); // esplode il testo in un array di parole
        // ciclo dell array
        for(var i in parole) {
            // ricostruiamo la riga
            riga += parole[i] + " ";
            // incrementiamo il contatore
            conta++;
            // se è ora di andare a capo
            if(conta == acapo) {
                // stampiamo la riga
                tCtx.fillText(riga, 0, h);
                // azzeriamo i parametri
                riga = "";
                conta=0;
                // incrementiamo l'altezza
                h+=10;
            }          
        }
        // stampiamo l'ultima riga
        tCtx.fillText(riga, 0, h);
        
        imageElem.src = tCtx.canvas.toDataURL();
    }
</script>

ho commentato non credo servano altre spiegazione al massimo chiedi pure

In effetti oggi il tempo non è dei migliori, ma ormai a breve arriverà il bel tempo...
Tornando allo script, con questa soluzione ho risolto tutti i miei problemi, sei stato gentilissimo e di graaaaandissimo aiuto, la tua disponibilità spero ti venga ripagata nella vita...
grazie ancora