html - 多个画布元素到数据网址？

Question

我即将开发一个使用画布的 HTML5 应用程序。我将需要该项目的多个图层，因为该应用程序需要在图像顶部绘制多个文本区域。这些文本区域需要根据字符串的长度调整大小。

现在阅读了一些关于 SO 的帖子，我意识到多层有两种方法：

1. 只需创建多个画布元素并使用 z-index 将它们堆叠在一起
2. 使用仅使用一个画布元素的现成框架创建图层

选项 1 似乎更容易，但是（这是我的问题），我可以将方法 1 的结果保存到数据 URL 或某种平面图像吗？

任何帮助表示赞赏

Answer 1

您可以将图像、画布和视频的内容绘制到另一个画布上，因此您可以这样做：

/// draw the background image
ctx.drawImage(image, x, y);

/// draw and scale text to fit main canvas
ctx.drawImage(txtCanvas1, x, y, newWidth, newHeight);

/// draw and scale text to fit main canvas
ctx.drawImage(txtCanvas2, x, y, newWidth, newHeight);

然后，您只需从该画布中提取所有内容：

var flattenedImage = canvas.toDataURL();

这个在线演示展示了这里描述的原理。只需输入一个长文本，您就会看到它在您键入时被夹在背景图像中。可以将内容提取为单个图像数据 uri。