将HTML生成图片

作者 新城 日期 2017-12-23
web
将HTML生成图片

生成效果图片

—— Liter
<–!more–>

项目需求

1.前端添加管理员信息包括(姓名,年龄,头像等)
2.将管理员信息显示在具体背景图片上,将其生成图片的形式上传后台服务器(base64格式或者文件的格式

实现思路

1.将管理员信息使用定位将其设置在指定背景图片上。
2.使用html2canvas将指定div生成canvas
3.将生成的canvas进行base64编码 或者生成文件 上传(建议base64上传)

附加功能

本地上传图片 进行base64编码之后回显
生成canvas之后支持本地下载

压缩图片

使用canvas API
quality 值越小,所绘制出的图像越模糊 对应图片越小 根据需求设置相对应的数值

1
var base64 = canvas.toDataURL('image/jpeg', quality );

点击访问Demo地址

下面笔记简单介绍html2canvas的使用
html2canvas官网
github

1. 使用方法

1
2
3
4
5
6
7
html2canvas(document.getElementById('diploma'), {
onrendered: function(canvas) {
$('#view').html(canvas); // 容器
},
width: 547,
height: 398
});

diploma html容器
view放置将要生成图片的容器,设置固定宽高(547 * 398)

注意: 在生成图片的时候diploma容器不能被遮挡, 否则不能生成完整的canvas

2. 基本常用API

参数名称 类型 默认值 描述
background string #fff 如果使用的是png背景图片这里可是使用如果没有 默认透明
height number null 需要手动设置
width number null 需要手动设置
timeout number 0 图片加载延时 默认为0
timeout number 0 图片加载延时 默认为0

其他API参看官网手册

3. 本地上传头base64编码(回显)

FileReader接口提供了读取文件的方法和包含读取结果的事件模型
主要是将上传的图片文件转换成base64

1
2
3
4
5
 var r = new FileReader()
r.readAsDataURL(file)
r.onload = function(e){
$('.avatar img').attr('src', e.target.result) // 将img src设置base64
}

附上FileReader对象详细文档

4.canvas转base64上传

将html2canvas生成的canvas转换成base64进行上传

1
2
3
4
var canvas = document.querySelector("#view canvas")
var dataURL = canvas.toDataURL("image/png");
dataURL = dataURL.split(",")[1];
return dataURL

附上canvas API文档

注意事项

转换base64的时候需要一定时间可以使用promise函数异步去执行,在没有base64产生的时候执行会报错

组后点击下载 使用js将canvas转换成文件进行下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function Download(){
//cavas 保存图片到本地 js 实现
//------------------------------------------------------------------------
//1.确定图片的类型 获取到的图片格式 data:image/Png;base64,......
var type ='png';//你想要什么图片格式 就选什么吧
var d=document.querySelector('#view canvas');
var imgdata=d.toDataURL(type);
//2.0 将mime-type改为image/octet-stream,强制让浏览器下载
var fixtype=function(type){
type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
var r=type.match(/png|jpeg|bmp|gif/)[0];
return 'image/'+r;
};
imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
//3.0 将图片保存到本地
var savaFile=function(data,filename)
{
var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href=data;
save_link.download=filename;
var event=document.createEvent('MouseEvents');
event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
save_link.dispatchEvent(event);
};
var filename=''+new Date().getDate()+'.'+type;
//直接用当前几号做的图片名字
savaFile(imgdata,filename);
};

只是个Demo 仅供参考 代码较乱 有待提高