多个canvas元素到数据url？

Question

我即将开发一个使用canvas的HTML5应用程序。我将需要多个图层用于项目，因为应用程序需要在图像上绘制多个文本区域。这些文本区域需要根据字符串的长度进行调整。

现在已经阅读了一些帖子，我发现有两种方法可以实现多层：

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

此 ONLINE DEMO 显示此处描述的原则。只需输入一个长文本，您就可以看到它在您键入时与背景图像夹在中间。内容可以作为单个图像数据提取。