—— Liter
项目需求
1.前端添加管理员信息包括(姓名,年龄,头像等)
2.将管理员信息显示在具体背景图片上,将其生成图片的形式上传后台服务器(base64格式或者文件的格式)
实现思路
1.将管理员信息使用定位将其设置在指定背景图片上。
2.使用html2canvas将指定div生成canvas
3.将生成的canvas进行base64编码 或者生成文件 上传(建议base64上传)
附加功能
本地上传图片 进行base64编码之后回显
生成canvas之后支持本地下载
压缩图片
使用canvas API
quality 值越小,所绘制出的图像越模糊 对应图片越小 根据需求设置相对应的数值
var base64 = canvas.toDataURL('image/jpeg', quality );
复制代码
下面笔记简单介绍html2canvas的使用
html2canvas官网
github
1. 使用方法
html2canvas(document.getElementById('diploma'), {
onrendered: function(canvas) {
$('#view').html(canvas); // 容器
},