用于从模板创建自定义图片的HTML5/Javascript代码

Question

基本上，像picfont这样的网站是如何工作的？或者那些蛋糕设计网站，你有一个模板，你把你的图片插入到框架中，并将样式文本添加到文本框中？

我有一个节目的邀请广告，在那里人们把他们的照片和名字，并发出个人邀请。所以图形师已经做好了模板。与其让1000人给他发送他们的照片和名字，我知道可以把模板放在网页上，让人们上传他们的照片，做一些定制的编辑和设置他们的名字的样式。请问我该怎么做？我想要一些指针或代码，我可以实现，请。谢谢。

Answer 1

如前所述，您将需要使用<Canvas>元素来完成此操作，但还需要进行一些自定义开发。

我冒失地创建了一个良好的起点：https://jsfiddle.net/Zomry/f8to2fyq/11/

此演示加载背景图像，可以插入自定义图像(此处假定为正方形)，并允许自定义文本的位置。

您可以将此示例更改为您喜欢的任何内容。您将需要更改背景，文本和背景的位置，以及任何您喜欢的更改。

祝你的项目好运。