toDataURL() Canvas HTML5

La funzione toDataURL() di HTML5 Canvas può catturare il contenuto di HTML5 canvas. I dati restituiti dalla funzione toDataURL() sono una stringa che rappresenta un URL di codifica contenente i dati grafici catturati.

Esempio online

Puoi catturare il contenuto di HTML5 canvas utilizzando la funzione toDataURL() di canvas. Ecco un esempio di codice completato:

var canvas = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();

I dati restituiti dalla funzione toDataURL() sono una stringa che rappresenta un URL di codifica contenente i dati grafici catturati. La stringa può essere visualizzata nell'elemento textarea, come segue:

var canvas = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();
document.getElementById("textArea").value = dataUrl;

Puoi anche visualizzare i dati recuperati in una nuova finestra. Ecco il codice per eseguire questa operazione:

<canvas id="ex1" width="500" height="100" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas><script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.font = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5　Canvas　Text", 50, 50);
context.font = "normal 36px Arial";
context.strokeStyle = "#000000";
context.strokeText("HTML5　Canvas　Text", 50, 90);
</script>

Di seguito è riportato un esempio di canvas con alcune immagini. Sotto il canvas ci sono due pulsanti che ti permettono di catturare le immagini disegnate sul canvas e mostrarle nell'area di testo sottostante i pulsanti, o in una nuova finestra.