往证书图片上填充文字内容

接口如下：

axios.post("/qrauth/search",{name:this.name,code:this.code,key:this.key,validateCode:this.validateCode}).then(function(res){}

需要实现：

在手机端实现正确输入证书编号和持证人姓名已经验证码，跳转到证书界面，证书显示的内容是该登录人所有。

遭遇到的问题：图片如何居中？文字如何出现在证书的正确位置？

问题解决的方式：

图片作为背景图片，然后将图片放到一个div中，图片大小固定，div大小和图片保持一致。将该div的位置absolute。

该div同时在另外一个div中，另一个div水平居中显示。两个div的大小一致。

这样就实现了图片的居中显示。

html代码如下：

<div class="out"><span class="srcfont"><div class="inner"></span></div>

css代码如下：

.certificate-1 {width: 100%;height: 100%;background-color:#333333;text-align: center;//确保out div的父级该设置，out div会水平居中显示} .out {margin: 215px auto 254.81px;width:320px; height:225px;}.srcfont {font-family:Microsoft YaHei;/* font-family: KaiTi; */font-size: 5px;}.inner {background:url('/static/image/idenCertifi.jpg');background-repeat:no-repeat;position: absolute;width:320px; height:225px;}

文字在证书页面需要绝对定位，具体的位置需要根据页面来进行调节，代码如下：

<P style="left:52px; top:78px; position:absolute">{{ storeName }}</P>
<P style="left:131px; top:78px; position:absolute">{{ cname }}</P>
<p style="left:170px; top:78px; position:absolute"></p>
<p style="left:190px; top:78px; position:absolute"></p>
<p style="left:250px; top:78px; position:absolute">{{ productName }}</p>
<p style="left:198px; top:91px; position:absolute">{{ position }}</p>
<p style="left:230px; top:91px; position:absolute">{{ level }}</p>
<p style="left:210px; top:142px; position:absolute">{{ code }}</p>
<p style="left:210px; top:150px; position:absolute"></p>
<p style="left:227px; top:150px; position:absolute"></p>
<p style="left:240px; top:150px; position:absolute"></p>

往证书图片上填充文字内容相关推荐

PS 修改图片上的文字内容但保留文字格式
开发项目需要把公司logo修改一下,想要修改图片上文字内容的一部分,保留文字格式. 纯粹PS菜鸟,不过最后效果还可以,logo图片比较简单第一步:把图片中的文字截出单独保存成图片第二步:打开网址h ...
教你用OCR文字识别工具快速识别图片上的文字
OCR文字识别工具,指利用OCR(Optical Character Recognition,光学字符识别) 技术,将图片.照片上的文字内容,直接转换为可编辑文本的工具.软件可以把图片转换成可以编辑 ...
通过Python在健康码，行程卡的截图上添加文字内容，省心省力
通过Python在健康码,行程卡的截图上添加文字内容,省心省力最近几年,由于疫情的原因,学校经常要求家长,把健康码,通行卡等截图内容加上学生名字以及家长的名字或者电话号码后,发给学校:如此一来,就要 ...
比Everything更强的文件搜索工具，支持文件名、文件内容和文件图片上的文字搜索，文件内容搜索工具，文件图片内容搜索工具，OCR图片文本识别搜索，文件快速搜索工具，文字识别文件搜索工具
Windows自带的文件搜索功能想必不需要过多吐槽,搜索速度简直是在龟爬,所以小编很早之前就在用Everything进行文件搜索了,不过,今天的主角不是它,而是比它更更更更更强的一款软件! 这款软件适 ...
如何去除图片上的文字(PS使用教程)
很多时候由于工作的需要,需要对我们的图片进行修改,修改的同时还想要保存我们的图片背景,所以很多人就不知道怎么弄了,小编跟大家分享一下使用PS如何简单的去掉图片上的文字,希望对大家有所帮助! 方法/步骤 ...
php打印文字到图片,【PHP】打开一个图片然后加上水印（图片上生成文字）
1.自动生成图片,在图片上生成文字 Header("Content-type: image/gif"); //设置Header,如果输出图片不成功,请先暂时去掉这代码查看错误 $i ...
chatgpt赋能python：Python去除图片上的文字：技术与应用
Python去除图片上的文字:技术与应用随着互联网的发展,图片的使用越来越广泛.然而,有些图片上却存在着不必要的文字,影响了用户的阅读体验和SEO效果.在这种情况下,Python可以帮助我们快速.准 ...
python识别图片指定位置文字_python批量识别图片指定区域文字内容
Python批量识别图片指定区域文字内容,供大家参考,具体内容如下简介对于一张图片,需求识别指定区域的内容 1.截取原始图上的指定图片当做模板 2.根据模板相似度去再原始图片上识别准确坐标 3.根 ...
图片上的文字怎么转换为word
图片上的文字怎么转换为word 很多软件因为自身技术不成熟所有对使用环境操作步骤等有诸多的要求,使得用户使用的时候很不方便.一般的ocr文字识别软件不能在win7系统中使用,有的时候要使用这个软件还要 ...

往证书图片上填充文字内容

往证书图片上填充文字内容相关推荐

最新文章

热门文章