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