Convert HTML5 Leinwand zu IMG Element

Question

Ich mag würde, um die Größe, eine HTML5-Canvas strecken someway, dass die Leinwand wirken wie ein IMG-Element: set Breite-Höhe für Pixel, Prozent ...

ich, wenn sich fragen, ist es Jede Möglichkeit zum Konvertieren/Exportieren eines HTML5-Canvas in ein IMG-Element oder auf andere Weise, die dies direkt in Canvas möglich machen.

Ich habe auf Google recherchiert, aber es wie niemand im Internet scheinen hat zum ersten Mal, oder vielleicht ... ich kann einfach nicht herausfinden,

Ich verwende KineticJS Bibliothek, für Details.

Bitte helfen Sie mir! Ich danke dir sehr! Und Entschuldigung für mein schlechtes Englisch ...

Answer 1

Geben Sie zuerst Ihrer Leinwand eine ID (z. B. example). Dann können Sie mit normalem JavaScript ein Bild erstellen, das auf diesem Zeichenbereich basiert, und es formatieren:

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