下載 canvas 作為圖像，但在圖像中添加來自 DOM textarea 的附加文本

Question

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

我有下載按鈕，它可以工作 - 它下載canvas元素作為圖像。 但是，我還需要將textarea文本中的文本添加到此下載圖像中。 它應該低於canvas 。

這應該怎么做？ 我不知道如何實現這個技巧？

代碼（它是 typescript 並在 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();

Answer 1

您可以增加 canvas 的高度，以便在繪圖下方但在 canvas 內部留出空間。 然后直接在 canvas 中繪制文本，然后將其導出為圖像。

這是您可以調整的示例：

 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, 0, 200, 200); link.addEventListener("click", clickHandler, false); function clickHandler () { ctx.clearRect(0, 225, 200, 20); // Clear just the text part ctx.font = "20px serif"; ctx.fillText(text.value, 0, 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>

請讓我知道這是否是您要問的；）

編輯：這是一個片段，它不會讓你下載圖像。 您可以在本地運行它以查看它的工作。

Answer 2

您是什么意思“我還需要在此下載圖像中添加文本”？

一個下載有自己的 MIME 類型：它可以是文本或圖像，但不能同時是兩者。

如果你的意思是你想要一個高於 canvas 的圖像，其中上半部分是 canvas 圖像，下半部分是文本，你可以：

創建另一個具有正確尺寸的 canvas
將源canvas的內容復制到第二個canvas中
使用fillText或strokeText來渲染第二個canvas下部的文字
下載第二個 canvas 圖像而不是源圖像

另一種選擇可能是創建一個 zip 文件，其中包含兩個文件：一個圖像（從畫布上轉儲）和一個包含文本的 txt 文件並下載它......

如果你的意思是別的，請更具體。

Answer 3

我認為沒有辦法從 canvas 獲取實際文本。

在我看來，你有兩個選擇。

一種是在用它填充 canvas 之前將文本保存到 textarea （當然，如果您是創建 canvas 的人並且您不只是在那種形式中找到它）

其次，將從 canvas 創建的圖像發送到您的服務器，並嘗試使用 exif 工具獲取文本。 有一些 javascript OCR（光學字符識別）工具，但還沒有測試過它們中的任何一個。

下載 canvas 作為圖像，但在圖像中添加來自 DOM textarea 的附加文本

問題描述

3 個解決方案

解決方案1
6 2021-02-03 11:55:21

解決方案2
2 2021-01-30 17:36:18

解決方案3
0 2021-01-31 18:42:05

下載 canvas 作為圖像，但在圖像中添加來自 DOM textarea 的附加文本

問題描述

3 個解決方案

解決方案1 6 2021-02-03 11:55:21

解決方案2 2 2021-01-30 17:36:18

解決方案3 0 2021-01-31 18:42:05

解決方案1
6 2021-02-03 11:55:21

解決方案2
2 2021-01-30 17:36:18

解決方案3
0 2021-01-31 18:42:05