Converti HTML5 canvas di elemento IMG

Question

vorrei ridimensionare, allungare una tela HTML5 in qualche modo che l'atto di tela come un elemento IMG: impostare la larghezza-altezza per pixel, cento ...

mi chiedo se c'è qualsiasi modo per convertire/esportare una tela HTML5 su un elemento IMG, o in qualche modo che possa renderlo possibile direttamente nella tela.

Ho ricercato su Google, ma sembra come nessuno su internet hanno fatto prima, o forse sono io che non riesco a capire ...

Sto utilizzando la libreria KineticJS, per dettagli.

Per favore aiutatemi! Grazie mille! E scusa per il mio pessimo inglese ...

Answer 1

Per prima cosa, dai un foglio di tela (es. example). Quindi, utilizzando il semplice JavaScript è possibile creare un'immagine basata su quella tela e formattarla:

var canvas = document.getElementById('example'), 
    dataUrl = canvas.toDataURL(), 
    imageFoo = document.createElement('img'); 
imageFoo.src = dataUrl; 

// Style your image here 
imageFoo.style.width = '100px'; 
imageFoo.style.height = '100px'; 

// After you are done styling it, append it to the BODY element 
document.body.appendChild(imageFoo);