[聚合文章] 将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 );

点击访问Demo地址

1. 使用方法

html2canvas(document.getElementById('diploma'), {
        onrendered: function(canvas) {
            $('#view').html(canvas);  // 容器
        },
        width: 547,
        height: 398
    });

diplomahtml容器 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

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进行上传

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转换成文件进行下载

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);
};