Javascript 下载画布作为图像，但在图像中添加来自DOM textarea的其他文本

我有canvas元素（我使用Fabric.JS）。在画布下方的屏幕上有Dom

textarea

我有下载按钮，它工作-它下载

canvas

元素作为图像。 但是，我还需要将

textarea

text中的文本添加到此下载图像中。它应该在画布的下方

如何做到这一点？我不知道如何实施这一伎俩

代码（它是typescript，在React应用程序中使用，但我想在这里并不重要，因为如果它是纯Javascript的话，想法也是一样的——创建一个虚拟元素并触发单击）

你说“我还需要在下载图像中添加文本”是什么意思

一个下载有自己的mime类型：它可以是文本或图像，但不能同时是两者

如果您的意思是希望图像高于画布，其中较高的部分是画布图像，较低的部分是文本，则可以：

创建另一个具有正确维度的画布

将源画布的内容复制到第二个画布中

使用fillText或strokeText渲染第二个画布下部的文本

下载第二个画布图像，而不是源图像

另一个选项是创建一个包含两个文件的zip文件：一个图像（从画布转储）和一个包含文本的txt文件并下载

---

如果你的意思是其他的，请更具体一些。

我认为没有办法从画布上获取实际文本

在我看来，你有两个选择

一种是在用文本填充画布之前将文本保存到文本区域（当然，如果您是正在创建画布的人，并且您不只是发现它已经在该表单中了，那么这是当然的）

---

第二种方法是将从画布创建的图像发送到服务器，并尝试使用exif工具获取文本。有一些javascript OCR（光学字符识别） ) 工具，但尚未测试任何工具。

您可以增加画布高度，以便在绘图下方但画布内部留出空间。 然后直接在画布中绘制文本，然后将其导出为图像

下面是一个您可以调整的示例：

var canvas=document.getElementById（'canvas'），
text=document.getElementById（'text'），
link=document.getElementById（'link'），
ctx=canvas.getContext（'2d'）；
canvas.width=“200”；
canvas.height=“225”//使主绘图的高度更大
//画点东西
ctx.fillStyle='绿色'；
ctx.fillRect（0,0200200）；
link.addEventListener（“单击”，clickHandler，false）；
函数clickHandler（）{
clearRect（0，225，200，20）；//只清除文本部分
ctx.font=“20px serif”；
ctx.fillText（text.value，0，220）；
var a=document.createElement（“a”）；
a、 下载='filename.png'；
a、 href=canvas.toDataURL（）；
文件.正文.附件（a）；
a、 单击（）；
文件.body.removeChild（a）；
删除一条；
}

身体{
宽度：100px；
}
下载

最好的解决方案是有一个图像，其中包含“canvas drawing”+“texterea中的文本，如果需要转换为图像”，因此@renathy我应该已经给了你答案。在上，你应该能够找到如何使用canvas维度，以及如何从画布抓取并粘贴内容到另一个画布上。

const url = canvas.toDataURL({
      format: "png",
      width,
      height,
    });
    const a = document.createElement("a");
    a.href = url;
    a.download = "download";
    const clickHandler = () => {
      setTimeout(() => {
        URL.revokeObjectURL(url);
        a.removeEventListener("click", clickHandler);
        a.remove();
      }, 150);
    };
    a.addEventListener("click", clickHandler, false);
    a.click();