Konwersja HTML5 canvas do elementu IMG

Question

chciałbym zmienić rozmiar, rozciągnąć płótno HTML5 w jakiś sposób, że akt płótno jak element IMG: ustawić szerokość-wysokość po pikselu, procent ...

Zastanawiam się, czy jest tam w dowolny sposób konwertować/eksportować płótno HTML5 do elementu IMG lub w inny sposób, który umożliwia to bezpośrednio w obszarze roboczym.

ja zbadali w Google, ale wydaje się, jak nikt w internecie nie zrobiłeś tego wcześniej, a może po prostu nie mogę wymyślić ...

używam biblioteki KineticJS, dla szczegółów.

Proszę, pomóżcie mi! Dziękuję bardzo! I przepraszam za mój zły angielski ...

Answer 1

Najpierw nadaj identyfikatorowi swojego płótna (np. example). Następnie za pomocą zwykłego kodu JavaScript możesz utworzyć obraz na podstawie tego płótna i nadać mu styl:

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