javascript - HTML5 キャンバスを IMG 要素に変換する

Question

キャンバスが IMG 要素のように機能するように、HTML5 キャンバスのサイズを変更して引き延ばしたいと思います: 幅と高さをピクセル、パーセントで設定します...

HTML5キャンバスをIMG要素に変換/エクスポートする方法、またはこれをキャンバス上で直接可能にする方法があるのだろうか.

詳細については、KineticJS ライブラリを使用しています。

助けてください！

Answer 1

まず、キャンバスに ID を付けます (例: example)。次に、プレーンな JavaScript を使用して、そのキャンバスに基づいて画像を作成し、スタイルを設定できます。

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