HTML5 / JavaScript代碼從模板創建自定義圖片

Question

基本上，像picfont這樣的網站如何工作？ 還是那些擁有模板並在其中將圖片插入框架並在文本框中添加文字並對其進行樣式化的蛋糕設計網站？

我有一個節目的邀請廣告，人們在此張貼自己的照片和名字並發出個人邀請。 因此，圖形人員已經完成了模板。 我知道可以將模板放到網頁上，然后讓人們上傳圖片，進行一些自定義編輯和樣式化，而不是讓1000個人將其照片和姓名發送給他。 請問我該怎么做？ 我想要一些可以實現的指針或代碼。 謝謝。

Answer 1

如前所述，您將需要<Canvas>元素，但這也需要一些自定義開發。

我自由地創造了一個良好的起點： https : //jsfiddle.net/Zomry/f8to2fyq/11/

此演示加載背景圖像，可以插入自定義圖像（此處假定為正方形）並允許自定義文本的位置。

您可以將此示例更改為任何您喜歡的示例。 您將需要更改背景，文本和背景的位置以及您要更改的內容。

祝您項目順利。