将 HTML5 画布转换为 IMG 元素

Posted 2023-03-24

【中文标题】将 HTML5 画布转换为 IMG 元素

【英文标题】：Convert HTML5 canvas to IMG element

【发布时间】：2013-08-03 05:27:00

【问题描述】：

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

我想知道是否有任何方法可以将 HTML5 画布转换/导出为 IMG 元素，或者任何可以直接在画布上实现这一点的方法。

我正在使用 KineticJS 库，了解详情。

请帮忙！

【参考方案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);