生成图片证书
有些时候我们需要把一些数据以图片的形式进行保存操作,这里讲一下我们怎样实现这个过程,我们这里呢是需要生成一张证书然后以一张图片的格式进行保存。它的数据是变化的我们要获取到数据在进行数据的填写位置的处理再进行图片生成,我们这边是使用一个插件来进行图片的一个生成。
这边我们是设置了一些类容进行了一些排版留了一些相对应的空,用于填个人信息,应为我们这里的这个信息不是固定的所以要在后面针对个人进行数据的回填,
这下边引入一下插件这个插件是专门把HTML代码转换成图片
上面设置好一些页面信息,然后在下面写了一个方法给了一个变量,变量里面我们进行了数据的获取已经获取到当前登录用户的相关信息,我们先把上面填空所需要的信息一个一个拿出来,第一个姓名,然后考试时间,成绩,证书编号,然后下面还有一个证书颁发的时间,获取到这些查询出来的个人信息之后,我们在把这些信息用jQuery获取到相对应的ID然后设置文本的回填,
相对应的数据回填之后我们进入到这个的重点怎样把一段HTML变成一张图片,
首先我们是把类容写入到canvas里面,就是把上面你要生成图片的类容获取到然后放入canvas里,我们这里通过ID获取到我们需要生成图片的类容部分,获取到类容放入之后,就是获取到生成了的图片的路径,然后把路径给对应的路径进行显示
左边是还没有填入类容的时候页面的样子,右边是查询到个人信息后进行数据的填入产生的页面,然后点击生成图片,就可以调用生成图片的那个方法
这边呢就是点击生成图片按钮后弹出一个模态框然后就会把我们所选的类容以图片的格式显示出来,然后就可以进行图片的下载保存了哦。
注(代码来自潘老师)