将画布下载为图像，但在图像中添加来自 DOM textarea 的附加文本

如何解决将画布下载为图像，但在图像中添加来自 DOM textarea 的附加文本

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

我有下载按钮，它可以工作 - 它将 canvas 元素下载为图像。但是，我还需要将 textarea 文本中的文本添加到此下载图像中。它应该低于 canvas。

这应该怎么做？我不知道如何实现这个技巧？

代码（它是打字稿并在 React 应用程序中使用，但我猜在这里无关紧要，因为如果它是纯 Javascript 的想法将是相同的 - 创建虚拟元素并触发点击）

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

解决方法

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

这是一个你可以改编的例子：

var canvas = document.getElementById('canvas'),text = document.getElementById('text'),link = document.getElementById('link'),ctx = canvas.getContext('2d');

canvas.width = "200";
canvas.height = "225"; // Make the height bigger that the main draw

// Draw something
ctx.fillStyle = 'green';
ctx.fillRect(0,200,200);

link.addEventListener("click",clickHandler,false);

function clickHandler () {

    ctx.clearRect(0,225,20); // Clear just the text part
    ctx.font = "20px serif";
    ctx.fillText(text.value,220);

    var a = document.createElement("a");
    a.download = 'filename.png';
    a.href = canvas.toDataURL();
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    delete a;
  
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            width: 100px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <textarea id="text"></textarea>
    <button id="link">Download</button>
</body>
</html>

请让我知道您是否在问;)

编辑：这里是一个片段，它不会让您下载图像。您可以在本地运行它以查看它是否有效。

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

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

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

创建另一个具有正确尺寸的画布
将源画布的内容复制到第二个画布中
使用 fillText 或 strokeText 在第二个画布的下部渲染文本
下载第二张画布图像而不是源图像

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

如果你的意思是别的，请更具体。

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

在我看来，你有两个选择。

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

其次是将从画布创建的图像发送到您的服务器并尝试使用 exif 工具获取文本。有一些 javascript OCR（光学字符识别）工具，但尚未对其进行测试。