从预渲染的画布元素或组件（如文本框）生成html？

Question

我正在学习JavaScript和HTML5，出于好奇心想：

1）是否可以从Canvas元素生成HTML？所以例如我们有一个Canvas形状，点击一个按钮它会生成渲染它的html5代码吗？

2）我们在页面上有一个HTML DOM按钮，将其转换为'html5代码？

由于

Answer 1

1

不，画布只是一个位图。浏览器幸福地不知道刚绘制的是什么形状。为了能够将形状转换为HTML，请将canvas视为视图端口或内部存储为对象的形状的再现。将您的内部对象视为根，然后您可以从根本上生成HTML，位图（画布），SVG，JSON等。 Canvas只是表示这些数据的一个通道，而不是它的来源。

您可以通过调用：

将画布的内容提取为图像

dataUri = canvas.toDataURL();

或像素数组：

buffer = context.getImageData(x, y, w, h).data;

请注意，在这两种情况下CORS restrictions都适用。

2

有一种简单的方法可以获取元素HTML的当前快照：

/// assuming you have obtained the element
var html = button.outerHTML;

但如果你在元素中应用了很多外部CSS，那么它会变得更加复杂。