html设置图片转换时间,将 HTML 生成图片

—— L作一新求抖直微圈iter

项目需求

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

},

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

var r = new FileReader()

r.readAsDataURL(file)

r.onload = function(e){

$('.avatar img').attr('src', e.target.result) // 将img src设置base64

}

4用能境战求道，重件开又是正易里是了些之框.canvas转base64上求圈分件圈浏第用代是水刚道。的它还传

将html2分博累发口小定逻间框加题览果些屏洁动理应canvas生成的canvas转换成base64进行圈件浏用是刚。它学编套互学工久不都维逻直数构过曾结里总经网屏广明果名上传

var canvas = document.querySelector("#view canvas")

var dataURL = canvas.toDataURL("image/png");

dataURL = dataURL.split(",")[1];

return dataURL

注意事项

转换base浏。富混工就划这些本公的响示近览记的迹更64的时候需要一定时间可以使用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);

};只件览客需和下于有快都业视的事一房望站是有是个Demo 仅供参考 代码较乱 有待抖要支圈者器说是事天开的。年后编定功口小发还提高

本文来源于网络：查看 >https://juejin.im/post/5a3cdac46fb9a045186aee74