将HTML5画布转换为IMG元素

Question

我想调整大小,拉伸一个HTML5画布,画布就像一个IMG元素:设置width-height by pixel,percent ...

我想知道是否有任何方法可以将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);