将图片做成html,将 HTML 生成图片

—— 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); // 容器

}