是否可以在图像内制作占位符并稍后替换它?

Posted

技术标签:

【中文标题】是否可以在图像内制作占位符并稍后替换它?【英文标题】:Is it possible to make a placeholder inside an image and replace it later? 【发布时间】:2020-05-12 21:55:27 【问题描述】:

我被要求制作一个 php 软件,如果管理员/用户可以导入 certificate of attendance 模板,然后导入名称列表,那么该软件应该会生成带有列表中名称的证书图像。

我的初步想法是证书应该是图片形式,并有一个占位符可以替换为名称,例如:

在这里,我们可以将<Type Person's Name Here> 占位符替换为列表中的名称。

不幸的是,这都是理论上的,我不能只在 .jpg.png 文件中搜索占位符来替换它。

经过一番研究,我发现一些网站提供了一种开放标准的证书模板.ai.eps都可以通过Adobe Illustrator打开然后你发现所有的文本都是可编辑的,你可以简单地替换名称占位符example。

问题是这两种文件类型都是专有的,我怀疑我是否可以找到一个 php 库来轻松编辑它们。

这和20253386的情况很相似,只是需要更改证书模板,如果我只有一个证书模板那么我只需要知道名称占位符的坐标并使用Imagick::annotateImage但是对于可导入的模板,我不知道应该根据证书设计放置名称。

那么我还有什么其他选择?是否有任何开放标准可用于图像模板?有没有其他方法可以解决这个问题?

【问题讨论】:

我认为你想错了;图像不是您在里面“搜索这些字符,用这些字符替换”的字符串。加载图像,然后在其上绘制一个字符串并保存。 google.com/search?q=php+draw+text+on+image 如果您使用 SVG 图像可能会起作用,因为它只是带有纯文本的标记。 PDF 文档可以吗?我过去曾使用FPDF 做这种事情(发票,但同样的程序也可以)。导入 PNG 或 JPG 背景图像,并添加文本对象以填写每个证书的详细信息。导入和嵌入字体很容易,您可以使用 GetStringWidth 函数创建居中文本。 @CaiusJard 我知道无法搜索图像,这就是为什么我说这只是一种理论思考,正如我所说,在图像上写文本是不可能的,因为我需要知道将文本写入到的坐标,并且由于管理员/用户可以设计自定义模板并导入它,我无法知道这些坐标 CSS,使用您的证书作为背景图片,然后将文本放在应该显示文本的 div 上。您可以嵌套文本 div 并使用网格或引导程序或普通 ole CSS。 【参考方案1】:

我会将坐标问题推给用户,并为模板图像设计一些简单的编码系统,可能使用文件名。例如,如果您有两个文件:

CertificateOfAttendance2020 name@200,200 description@200,300 date@100,500.png
CertificateOfEnrolment2020 name@200,200 date@100,500.png

您可以解析它们的名称,例如在空格上拆分,将第一个作为名称,将其他在@上拆分,并将第一位作为字段名称,第二位作为放置位置的 x,y。

在选择器中向用户显示模板名称部分。当他们选择例如出勤证书时,说“这个证书需要三个额外的信息”并将这些字段动态地放在你的 UI 中:

Name:
Description:
Date: defaulted to today

或者当他们选择注册时,只需向他们显示两个字段


让用户输入他们想要的东西,使用一些工具将这些东西放在坐标上。应该由设计图像的人提供坐标。如果您也在为此编写工具,那么该工具可以命名文件。也许您可以通过某种方式对左/右/中心对齐、字体大小和面进行编码。也许最终您只需在文件名中放入一个 css 块,然后将整个内容扔掉并用 html 文件替换它描述世界上最复杂的证书,并在 html 中有占位符,图像将只是一个背景:)

生成图像,可以是 imagemagick 之类的图像库,也可以是具有大图像和绝对位置的 html div,然后使用例如 wkhtmltopdf 使其成为 pdf.. 大量选项,我们是不是来为你设计的..(尽管它看起来像是我所做的)。我们不“为您设计您的系统”的原因是它是相当主观的,什么是最好的并且没有正确的答案 - 我上面谈到的方法可能存在许多缺陷,可能使其不适合您的上下文。 我的观点纯粹是,您需要找到某种方法来存储/关联您需要请求的数据(名称、描述)与提供背景的图像和驱动这些东西放置位置的信息 - 我试图让这个“答案”充满“可以做”和“也许”而不是“应该做”,因此我认为它实际上只是对一个大部分离题问题的扩展评论——只有这里的一个事实确实使它成为答案(上面用粗体表示)

【讨论】:

以上是关于是否可以在图像内制作占位符并稍后替换它?的主要内容,如果未能解决你的问题,请参考以下文章

如何制作滚动条占位符

是否可以制作没有模糊的 Next.js Image 占位符?

在 Angular 中使用占位符

如何阻止占位符转换回来? (CSS)

html 图像替换扩展占位符

带有百分比的图像占位符?