通过插件生成图片

开发工具与关键技术：VS    JS
作者：宋永烨
撰写时间：2019/5/15

部分时候,比如打印证书,你需要的不是一个html页面而是一张图片时,或者是一个设计精美的页面,如何才能将指定html文件生成出一张图片?使用插件html2canvas可以实现
第一步:导入并调用

导入插件的方法较为简单便不再赘述,只需要注意导入的位置在jQuery的库文件之后即可
第二步:创建并选中
创建一个用于生成图片的方法,方便在又多个地方需要生成图片时可以直接调用或修改后调用

选中需要生成为图片的元素的最外层元素并获取它的宽度,为了使弹出的遮罩层显示的部分与生成图片的宽度相等.使用jQuery赋值,因为获取的是jQuery的对象.

第三步:判断与调用
生成图片时,需要生成的的图片一般是背景加一些动态变化的数据,为了防止在数据为空时误触导致生成只有背景而无数据的图片,所以需要判断需要生成为图片的表的数据是否存在,为了防止该数据因部分数据缺失二导致判断不到的情况,请尽量使用一些特别的字段,比如一个可以登录的系统,生成为图片的html文件含有账号,则判断账号是否为空,反正尽量判断一些不允许为空的字段即可.
判断完成后,掉用插件,调用方法:
html2canvas(需要选中的数据, {需要运行的方法} ;

第四步:生成图片

通过插件固定的写法将选中的html代码段转换成图片
,然后设置图片的src 路径
之后可以通过遮罩层来将图片通过上文的src调用到并显示在页面上

本文使用layui的遮罩层来显示图片
实际效果

样式还是比较好看的,重要的是可以直接生成图片而不用通过截图来获取图片,通过调整需要转化为图片的html代码中的用于存储文字的p标签(或其他存储文字的标签)在页面上的位置可以达到类似于ps的效果
插件本身代码较为简单,但也有需要注意的地方:
1.引入时需要放在jQuery库文件的后面
2.插件选中的对象的格式是jQuery对象,如果用原生的js获取的对象需要通过jQuery代码转换为jQuery对象.
3.生成的图片不会显示在页面上,需要配合其他代码来将它显示在页面上

代码来源与老师