多个画布元素到数据网址？答案

【问题标题】：Multiple canvas elements to data url?多个画布元素到数据网址？
【发布时间】：2013-09-22 04:55:07
【问题描述】：

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

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

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

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

感谢任何帮助

【问题讨论】：

您希望用户写入文本区域还是只想在那里输出一些文本？如果您想要后者，您只需使用device.fillText("sometext",xposition,yposition)。请注意，x 和 y 是相对于设备坐标系的原点而言的。
用户将写入一个普通的html输入框
您可以将多个画布图像“拼合”为一个，只需将其他画布元素的内容以您喜欢的任何顺序复制到第一个图像中即可 - 然后您可以获得该图像的数据 URI剩下的画布。

标签： html canvas

【解决方案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 显示了这里描述的原理。只需输入一个长文本，您就会看到它在您键入时被夹在背景图像中。可以将内容提取为单个图像 data-uri。

【讨论】：