使用現有的背景圖像和文本在JavaScript中創建圖像以安全爲php在php

Question

我擁有一些在facebook上發佈的圖片，其中我張貼包含有趣文本的圖像（如下面的示例）。在所有頁面中，我使用相同的文字，但使用不同的背景圖片。背景的大小始終相同。只有顏色改變。由於我必須單獨爲每張圖片保存不同的背景，因此我現在正在嘗試創建一個小腳本，使我可以將具有不同背景的創建文本存儲爲jpg或png文件。這裏是我想象中的過程：

1. 我將文本添加到這將是一個普通的HTML表單的一部分的文字區域。

2. 使用javascript我想在下面的示例的白色邊框內適合文本（以字體大小，寬度和高度）。

3. 當表單被取消後，腳本應該運行一個循環並將文本保存在不同背景上的文件夾中。

這裏的輸出應該是什麼樣子

有我的計劃的一部分，我知道如何找出一個例子。但是有兩件事我堅持不懈。

1. 我該如何調整文本，使其適合樣本圖像的白色邊框？

2. 如何從背景圖像和一些文本上創建圖像。

是否有人有對如何處理這一點的想法？或者，甚至可能使用完整的工作腳本？

Answer 1

我不知道有一種方法可以在PHP中進行這種圖像生成。你爲它標記了Javascript，所以我假設你有一個前端。

我正要建議類似FitText.js的東西，但爲了將您的工作保存爲圖像文件，您需要使用Canvas API。它有一個toDataUrl('image/jpeg')方法。

您可以使用canvasCtx.drawImage來創建圖像背景。 A canvasCtx.strokeRect創建一個具有邊框的矩形。並用canvasCtx.fillText來繪製文字。

將文本到容器

有在要測量的文本將有多大的空間在其當前字體大小佔用畫布的方法。但是，當有可用的垂直空間時，這不會包裝文本，而是將其全部放在一行上。一個更好的解決辦法是有一個固定的字體大小和多條線路在<textarea>或多個<input> S，允許在下面的堆棧溢出線程討論你適合文本：

Size to fit font on a canvas

保存圖像到文件

退房此線程：Save canvas as jpg to desktop

老實說，畢竟這一點，我會說這將是更容易建立自動化的任何照片編輯器一點點你用。例如，Photoshop中的模板PSD。