javascript - 将 HTML5 画布转换为 IMG 元素

Question

我想调整大小、拉伸 HTML5 画布，使画布像 IMG 元素一样：按像素设置宽度-高度、百分比...

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